How to create typewriter effect in ReactJS ?
Last Updated :
04 Dec, 2023
Learn how to enhance your React JS applications with a captivating typewriter effect using CSS and JavaScript, leveraging the typewriter-effect package for seamless and engaging UI design.
Prerequisites:
Steps to Create the React Application And Installing Module:
Step 1: Create a new react app.
npx create-react-app myapp
Step 2: Go to its directory by using the below command.
cd myapp
Step 3: We have to install the typewriter-effect, by running the following command in your project directory.
npm install --save typewriter-effect
or
yarn add typewriter-effect
Project Structure:
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Below is a sample program to illustrate the use of the typewriter-effect :
Javascript
import React from 'react' ;
import Typewriter from "typewriter-effect" ;
import './App.css' ;
function App() {
return (
<div className= "App" >
<Typewriter
onInit={(typewriter) => {
typewriter
.typeString( "GeeksForGeeks" )
.pauseFor(1000)
.deleteAll()
.typeString( "Welcomes You" )
.start();
}}
/>
</div>
);
}
export default App;
|
CSS
.App {
font-family : sans-serif ;
font-weight : 800 ;
font-size : 40px ;
text-align : center ;
display : flex;
justify- content : center ;
align-items: center ;
min-height : 100 vh;
background : green ;
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...