Как сделать анимацию появления текста по букве в реакте?

Question

[Kirill Ivanov]

Всем привет! Подскажите, плиз, как правильно сделать анимацию вывода текста по букве, как будто его кто-то печатает на экране. Пока какая-то ерунда получается

Answer 1

[rjyk]

let text = 'qwertyu';
let output = '';
let currentIndex = 0;

let intervalID = setInterval(() => {
    output += text[currentIndex];
    currentIndex += 1;
    console.log(output);
    if (currentIndex === text.length) {
        clearInterval(intervalID)
    };
}, 1000)

Также рекомендуют это делать через useEffect хук:

function RenderSubtitle() {
  const [subtitle, setSubtitle] = useState('');
  const text = 'qwertyu';
  let currentIndex = 0;

  useEffect(() => {
    const id = setInterval(() => {
      setSubtitle(prev => prev + text[currentIndex] );
      currentIndex += 1;
      if (currentIndex === text.length) {
          clearInterval(id)
      };
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{subtitle}</h1>;
}

Answer 2

[alalala]

typed.js не?

Comments

[Kirill Ivanov]

Спасибо за идею, но можно ли как-то без сторонних либ реализовать?

[alalala]

Kirill Ivanov,
я дж не бумбум
вы пишете на дж, скачайте исходник, посмотрите, вытяните нужную часть

[historydev]

alalala, ну так если вы не бум-бум, зачем отвечать?) Анимация пишется в 3 строки кода, зачем подключать стороннюю библиотеку?