Open In App
Related Articles

How to create typewriter effect in ReactJS ?

Improve Article
Improve
Save Article
Save
Like Article
Like

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:

reactProjstructure

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';
 
//importing typewriter-effect
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: 100vh;
    background: green;
}


Output:


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials