Nadeem Shareef
ResumeAboutBlogsLinkedIn

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

Setup typed.js 


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

Let's explore typed.js 


    ...
  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

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