A lot of websites nowadays contain texts that simulate typing effect, eraser effect and a blinking cursor.

Demo

Let's create a simple typewriter effect where we get to display a couple of words repeatedly on loop one after the other and that too as if we were typing via a typewriter.

Let's say we want to display :

• Hello World !
• Let's create a typewriter effect.

Getting started:

First of all we need to install a package named typewriter-effect .

npm i typewriter-effect

Adding to React app

Next up, import this inside any of your React component.

import Typewriter from "typewriter-effect";

Add your text

Finally, add your custom text inside the Typewriter tags as follows:

  <div>
      <Typewriter 
          options={{
               strings: [
                    "Hello World!",
                    "Let's create a typewriter effect.",
               ],
               autoStart: true,
               loop: true,
           }}
       />   
  </div>

A complete react component(index.js file)

import React from "react";
import ReactDOM from "react-dom";
import Typewriter from "typewriter-effect";

ReactDOM.render( 
 <div>
      <Typewriter 
          options={{
               strings: [
                    "Hello World!",
                    "Let's create a typewriter effect.",
               ],
               autoStart: true,
               loop: true,
           }}
       />   
  </div>, document.getElementbyId("root")
);

Demo

That's it🥳 You have created your first typewriter effect in less than 5 mins, I guess.

Thanks for reading this.🙏🏻