DEV Community

Cover image for Typing effect in React with typed.js and hooks
Mohammed Nadeem Shareef
Mohammed Nadeem Shareef

Posted on

20

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

  • 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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (5)

Collapse
 
krymancer profile image
Junior Nascimento β€’

How do we use this in typescript?

Collapse
 
shareef profile image
Mohammed Nadeem Shareef β€’

Just give the type to the el


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

Enter fullscreen mode Exit fullscreen mode
Collapse
 
shahin0 profile image
Shahin Sha β€’

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

Collapse
 
ha0ran5 profile image
Ha0ran5 β€’

Thanks.

Collapse
 
rafeehcp profile image
rafeehcp β€’

Can we get different font color for different iterations?

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay