React typing animation effect

#javascript #react #tutorial #beginners

Introduction

In this article, we will implement react typing animation effect using react-typed library. You ever want to add typing animation or typewriter-like effect to your react js website or react js application? This tutorial is for you.

Implementation

I will assume you already have a react js project.

Within your project directory, open cmd and run the following command to install the dependency

npm i react-typed

After installation, go to the component that you wish to implement this typing effect and import the library as shown below;

....
import Typed from "react-typed"
....

//call this within your jsx
<Typed
      strings={[
            "I'm a Full Stack Developer",
            "I Love Software Development",
            "I Love All My Subscribers",
          ]}
          typeSpeed={150}
          backSpeed={100}
          loop
        />

The code above is self explanatory.

The strings props takes an array of statements to apply the typing animation effect
typeSpeed specifies the duration in milliseconds to for the animation
backSpeed specifies the duration in millions to move back.
loop is a boolean value indicating whether to loop through the string

There many other props or configuration and you can learn more here npm react-typed

After you have done this, save your files and check your browser.

Note: The Typed component renders each statement in a span tag and you can customize it the way you want.

If you want the code to this tutorial which is implemented the video below; Find the code to this demo here

Background image credit @ FreeVector.com
https://www.freevector.com/fluid-gradient-background-30355

Summary
We have implemented a simple typing animation effect in a react js project and everything looks cool. I hope you can include this in your next react js project.

If you found this tutorial helpful, please follow me here and subscribe to my YouTube channel below. Thank you in advance.