Эффект печатающегося текста React?

В React для эффекта "печатающегося текста" можно использовать хуки useState и useEffect. Давайте создадим простой компонент, который будет выводить текст постепенно, как будто он печатается.

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

const TypingText = ({ text, speed }) => {
  const [displayText, setDisplayText] = useState('');

  useEffect(() => {
    let currentIdx = 0;

    const timerId = setInterval(() => {
      setDisplayText((prevText) => {
        if (currentIdx === text.length) {
          clearInterval(timerId);
          return prevText;
        }

        currentIdx++;
        return text.slice(0, currentIdx);
      });
    }, speed);

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

  return <div>{displayText}</div>;
}

export default TypingText;

В этом компоненте мы используем хук useState, чтобы хранить отображаемый текст, и хук useEffect, чтобы запускать эффект "печатающегося текста". При каждом запуске useEffect у нас запускается интервал, который постепенно добавляет к отображаемому тексту символы из исходного текста. Когда весь текст будет напечатан, интервал очищается.

Пример использования компонента:

<TypingText text="Привет, мир!" speed={100} />

Этот компонент будет отображать текст "Привет, мир!" с заданной скоростью печати. Вы можете настроить скорость печати, изменяя значение speed в миллисекундах.