Hello Developers 🤩🤩🤩

Let's admit it typing effect looks cool and the good news is we can achieve it without any pain 😜.

Let's install it first.

    npm install typed.js
    or
    yarn add typed.js
    or
    bower install typed.js

Setup typed.js

Let's dive into the code.


import Typed from "typed.js";
import { useEffect, useRef } from "react";

export default function App() {
  // Create Ref element.
  const el = useRef(null);

  useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ["Handy", "Mandy", "Candy", "More Strings"], // Strings to display
      // Speed settings, try diffrent values untill you get good results
      startDelay: 300,
      typeSpeed: 100,
      backSpeed: 100,
      backDelay: 100
    });

    // Destropying
    return () => {
      typed.destroy();
    };
  }, []);

  return (
    <div>
      <h1>Hello Developers</h1>
      {/* Element to display typing strings */}
      <span ref={el}></span>
    </div>
  );
}

Kaboom🔥🔥🔥 with just some lines of codes we achieve a lot thanks to typed.js

Let's explore typed.js

Custom cursor.
Loop.
Smart backspace


    ...
  useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ["Handy", "Mandy", "Candy", "More Strings"], // Strings to display
      // Speed settings, try diffrent values untill you get good results
      startDelay: 300,
      typeSpeed: 100,
      backSpeed: 100,
      backDelay: 100,
      smartBackspace: true,
      loop: true,
      showCursor: true,
      cursorChar: "!"
    });

    // Destropying
    return () => {
      typed.destroy();
    };
  }, []);
    ...

For TypeScript lovers it provide types by default.

Closing here 👋👋👋.

Typed.js examples
Typed.js docs

HappyLearing.

HappyCoding.

This is Shareef.
Live demo
GitHub repo of this blog
My GitHub
My Portfolio
Twitter ShareefBhai99
Linkedin

Cover photo by Firmbee
from Pixabay

Blog

Typing effect in React with typed.js and hooks

Mohammed Nadeem Shareef

Hello Developers 🤩🤩🤩

Let's install it first.

Setup typed.js

Let's explore typed.js

HappyLearing.

HappyCoding.

Join Our Newsletter. No Spam, Only the good stuff.

Related