Blog

In this Blog we are going to learn how to create Typing Effect in React

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

function TypingEffect({ text }) {
  const [displayedText, setDisplayedText] = useState('');

  useEffect(() => {
    let i = 0;
    const interval = setInterval(() => {
      setDisplayedText(text.slice(0, i));
      i++;
      if (i > text.length) clearInterval(interval);
    }, 100);
    return () => clearInterval(interval);
  }, [text]);

  return (
    <div className="typing">
      <span>{displayedText}</span>
      <div className="cursor"></div>
    </div>
  );
}

export default TypingEffect;

This code imports the useState and useEffect hooks from the React library, and also imports the typingEffect.css file that contains the CSS styles for the typing effect.

This code defines a new functional component called TypingEffect, which takes a text prop as input. Inside the component, we use the useState hook to define a new state variable called displayedText, which will be used to store the currently displayed text.

We also use the useEffect hook to create the typing effect. The effect runs whenever the text prop changes. Inside the effect, we first define a variable i to keep track of how many characters we have already displayed. We then set up a timer using the setInterval function that runs every 100 milliseconds. Inside the timer function, we update the displayedText state by slicing the text prop from the beginning to i characters. We then increment i by 1, and check whether we have reached the end of the text prop. If we have, we stop the timer using clearInterval.

Finally, we return the JSX code for the component. We wrap the displayedText variable inside a span element, and add a div element with the cursor class for the blinking cursor effect. We also wrap everything inside a div element with the typing class for the overall styling.

.typing {
  display: inline-block;
  border-right: 2px solid #000;
  padding-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 1s steps(20, end), blink .5s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  from, to { border-color: transparent }
  50% { border-color: #000 }
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background-color: #000;
  animation: blink .5s step-end infinite;
}

Let me break down the CSS code for you:

.typing is a CSS class that we use to style the container element for the typing effect. We set the display property to inline-block so that the container takes up only as much width as necessary and does not span the entire width of the page. We also set border-right to 2px solid #000 to create the blinking cursor effect. padding-right and white-space properties ensure that the text remains in place during the animation. overflow: hidden ensures that any overflowing text is hidden from view. We also define two animations – typing and blink – and apply them to the typing class using the animation property.

@keyframes typing is an animation that defines the appearance of the text during the typing effect. We set width to 0 at the beginning of the animation, and gradually increase it to 100% over the course of 1s.

@keyframes blink is an animation that defines the appearance of the cursor during the typing effect. We set border-color to transparent at the beginning and end of the animation, and to #000 at the halfway point (50%) to create the blinking effect.

.cursor is a CSS class that we use to style the cursor element. We set display to inline-block to ensure that the element takes up only as much space as necessary. We also set the width, height, and background-color properties to define the appearance of the cursor. Finally, we apply the blink animation to the cursor element.

import './App.css';
import TypingEffect from './components/TypingEffect';
function App() {
  return (
    <div className="App">
      <h1><TypingEffect text={"Typing Effect In React"}/></h1>
   
    </div>
  );
}

export default App;

Github Link