Typing effect in React with typed.js and hooks

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

Comments

[Junior Nascimento]

How do we use this in typescript?

[Mohammed Nadeem Shareef]

Just give the type to the el

const​ ​el​ ​=​ ​useRef​<​HTMLSpanElement​>​(​null​)​;

[Shahin Sha]

I am having a white line before the animation, how to remove that?

[Ha0ran5]

Thanks.

[rafeehcp]

Can we get different font color for different iterations?