How to add typewriter effect in react

Adding Typewriter Effect in React#

If you want to add a typewriter effect in React, there are various ways to do it. You can use third-party libraries or create your own custom component. Here are some approaches:

Using React Typewriter Effect Library#

One of the easiest ways to add a typewriter effect in React is by using a third-party library called React Typewriter Effect. You can install it using NPM:

$ npm install react-typewriter-effect

After the installation, you can import this library in your React component and use it as follows:

import ReactTypingEffect from 'react-typing-effect';

function App() {
  return (
    <div className="App">
      <ReactTypingEffect
        text={['Hello World!', 'I am a React Developer']}
        speed={100}
        eraseDelay={700}
      />
    </div>
  );
}

export default App;

In the above example, we have imported the ReactTypingEffect component from the library and used it inside the App component. We have passed an array of texts that we want to show in a typewriter effect. You can also set the speed of typing and eraseDelay (the time taken to erase the text).

Creating Custom Typewriter Component#

If you don't want to use a library, you can create your own custom typewriter component in React. You can use state and setTimeout function to display the text one by one with a delay. Here's an example:

import React, { useState, useEffect } from 'react';

function Typewriter() {
  const [text, setText] = useState('');
  
  useEffect(() => {
    const delay = 100; // typing delay
    const words = ['Hello World!', 'I am a React Developer'];
    let i = 0;
    let j = 0;
    const type = () => {
      if (j < words[i].length) {
        setText(text + words[i].charAt(j));
        j++;
        setTimeout(type, delay);
      } else {
        setTimeout(erase, delay + 1000);
      }
    };
    
    const erase = () => {
      if (j >= 0) {
        setText(text.slice(0, -1));
        j--;
        setTimeout(erase, delay);
      } else {
        i++;
        if (i === words.length) i = 0;
        setTimeout(type, delay);
      }
    };
    
    type(); // start typing
  }, []); // run only once
  
  return <div>{text}</div>;
}

export default Typewriter;

In the above example, we have created a Typewriter component that uses state and useEffect hook to display the text one by one with a delay. We have defined an array of words that we want to show in a typewriter effect. We have used two functions type and erase to type and erase each word with a delay. We have used setTimeout function to set the delay and setState function to update the text.

You can use this component in your React application as follows:

import React from 'react';
import Typewriter from './Typewriter';

function App() {
  return (
    <div className="App">
      <Typewriter />
    </div>
  );
}

export default App;

In the above example, we have imported the Typewriter component and used it inside the App component. You can customize this component as per your requirements.