DEV Community

loading...
Cover image for Typing effect in React with typed.js and hooks

Typing effect in React with typed.js and hooks

Mohammed Nadeem Shareef
Hello. I am a FrontEnd Developer I work with reactJS, nextJS, TypeScript, firebase, tailwindcss, SCSS.
・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode
  • 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();
    };
  }, []);
    ...

Enter fullscreen mode Exit fullscreen mode
  • 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

Discussion (0)