How to Create Typewriter Effect in ReactJS?

Last Updated : 12 Mar, 2025

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.

Approach

To create a typewriter effect in React, we will be using the typewriter-effect npm package. Import and use in the App file and define the value for various chaining methods like typeString, pauseFor, deleteAll, and start to render the required text.

Prerequisites

Steps to Create the TypeWriter Effect in ReactJS

Step 1: Create a new react app.

npx create-react-app react-app
cd react-app

Step 2: Implementing the Typewriter Effect Component

We’ll create a functional component that will manage the state of the text and simulate typing each character one by one. To improve the look of the typewriter effect, you can add custom CSS for the background, font styling, and cursor effect.

Example: Below is a sample program to illustrate the use of the typewriter-effect package in the React app to create the typewriter effect.

CSS

/* App.css */

.App {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e23ebf;
    font-family: 'Courier New', Courier, monospace;
    color: black;
    text-align: center;
}

.text-container {
    background-color: #007bff;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.typewriter-text {
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    color: black;
    border-right: 3px solid #333;
    padding-right: 5px;
}

@keyframes blink {
    0% {
        border-color: transparent;
    }

    50% {
        border-color: #333;
    }

    100% {
        border-color: transparent;
    }
}

.typewriter-text {
    animation: blink 0.75s step-end infinite;
}

JavaScript

//App.js

import React, { useState, useEffect } from 'react';
import './App.css';

const TypewriterEffect = ({ text, speed }) => {
    const [displayedText, setDisplayedText] = useState('');
    const [index, setIndex] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {

            if (index < text.length) {
                setDisplayedText((prev) => prev + text[index]);
                setIndex(index + 1);
            } else {
                clearInterval(interval);
            }
        }, speed);

        return () => clearInterval(interval);
    }, [index, text, speed]);

    return <span className="typewriter-text">{displayedText}</span>;
};

const App = () => {
    return (
        <div className="App">
            <TypewriterEffect text="Hello, world! Welcome to ReactJS." speed={200} />
        </div>
    );
};

export default App;

Output

In this example

The component initializes two state variables: displayedText (to store the text being typed) and index (to track the current character position in the text string).
The useEffect hook runs every time the index, text, or speed changes. It sets up an interval that adds one character from the text string to displayedText every speed milliseconds.
Inside the interval, it checks if the index is less than the length of the text. If true, it adds the next character to the displayedText and increments the index. When all characters are typed, it clears the interval.
The component returns a span element that renders the displayedText with the class typewriter-text, which will apply styling from CSS.
The App component calls TypewriterEffect with the text “Hello, world! Welcome to ReactJS.” and a typing speed of 200ms per character.

Customizing the Typewriter Effect

Adjusting Speed: You can control the speed of the typewriter effect by changing the speed prop in the TypewriterEffect component. For example, use speed={100} for faster typing or speed={300} for slower typing.
Text Customization: You can modify the text prop to change the content that will be typed out.

In this example, once the entire text is typed, it will be deleted letter by letter at a different speed, and the process will repeat.

CSS

/* App.css */
.App {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e23ebf;
    font-family: 'Courier New', Courier, monospace;
    color: black;
    text-align: center;
}

.typewriter-text {
    font-size: 2rem;
    font-weight: bold;
    color: black;
    border-right: 3px solid #333;
    padding-right: 5px;
}

JavaScript

import React, { useState, useEffect } from 'react';
import './App.css';

const TypewriterEffect = ({ text, speed, deleteSpeed, loop }) => {
    const [displayedText, setDisplayedText] = useState('');
    const [index, setIndex] = useState(0);
    const [isDeleting, setIsDeleting] = useState(false);

    useEffect(() => {
        const interval = setInterval(() => {
            if (isDeleting) {
                setDisplayedText(displayedText.slice(0, -1)); 
                setIndex(index - 1);
            } else {
                if (index < text.length) {
                    setDisplayedText(displayedText + text[index]); 
                    setIndex(index + 1);
                }
            }

            if (index === text.length) {
                setIsDeleting(true); 
            }

            if (index === 0 && isDeleting) {
                setIsDeleting(false);
                if (loop) {
                    setIndex(0);
                    setDisplayedText('');
                }
            }
        }, isDeleting ? deleteSpeed : speed);

        return () => clearInterval(interval);
    }, [index, text, speed, deleteSpeed, isDeleting, loop, displayedText]);

    return <span className="typewriter-text">{displayedText}</span>;
};

const App = () => {
    return (
        <div className="App">
            <TypewriterEffect text="Hello, world! Welcome to ReactJS." speed={100} deleteSpeed={50} loop={true} />
        </div>
    );
};

export default App;

Output

In this example

The code uses three state variables: displayedText (to store the text currently shown), index (to track the current character’s position in the text), and isDeleting (to indicate if characters are being deleted).
A useEffect hook is used to create a typing and deleting effect. It runs an interval every speed milliseconds to add or remove characters from the text.
When isDeleting is false, characters are added one by one to the displayedText based on the index. If index is less than the text length, the character at text[index] is added to displayedText.
When all characters have been typed, isDeleting is set to true, and characters are removed one by one from displayedText by slicing it.
After deleting all characters, if loop is true, the text will restart from the beginning, creating a continuous loop of typing and deleting.

Why Use a Typewriter Effect in ReactJS?

The typewriter effect is useful in many scenarios:

Dynamic User Interfaces: To animate text dynamically as part of your UI.
Loading Screens: To display information or a message while content is loading.
Marketing or Presentation Pages: To grab attention with animated text.

How to add Typewriter effect in Next.js ?

ritikumariupadhyay24

Improve

Article Tags :