This content originally appeared on DEV Community and was authored by DEV Community
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.
Video Tutorial
If you want to watch a short tutorial on how to implement react js typing animation effect like a typewriter, click on the video below.
Please don't forget to like, comment, subscribe to my YouTube channel and share the video with your friends.
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-16T07:54:18+00:00) React typing animation effect. Retrieved from https://www.scien.cx/2022/03/16/react-typing-animation-effect/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.