React TS - компонент TypeWriter

Question

Так что я все еще изучаю React и JavaScript в целом. Я пытался сделать компонент эффекта TypeWriter. В Интернете я нашел учебное пособие о том, как сделать ванильный JS TypeWriter, я пытаюсь преобразовать его в компонент React, я начал с него, пытаясь преобразовать некоторые переменные синхронизации в подпорки, но я ' я не уверен, как получить его полностью конвертированным и изо всех сил.

Дополнительно: Я также хотел бы сделать так, чтобы было prop для бесконечного зацикливания анимации или просто воспроизведения это один раз. Например: loop={true} заставит его играть неопределенно долго, если вы не укажете этот реквизит, он просто оживит массив и остановится на последнем слове в массиве.

Вместо использования classNames , Я хотел бы использовать styled-components, это, вероятно, также сработало бы лучше, так как для анимации мигающего курсора происходит кое-что динамическое c className.

Я не уверен, если код из этого руководства является наиболее эффективным способом написания такого рода логики c, поэтому, если есть способ улучшить его, пожалуйста, дайте мне знать. :)

Вот ванильное JS Учебное пособие по TypeWriter CodePen

Вот то, что у меня есть в моем компоненте:

import * as React from "react";
import styled from "styled-components";

interface ITypeWriter {
  textArray: Array<string>;
  typingDelay: number;
  erasingDelay: number;
  newTextDelay: number;
}

const TypeWriter: React.FC<ITypeWriter> = ({
  textArray,
  typingDelay,
  erasingDelay,
  newTextDelay
}) => {
  // START - Code from tutorial
  const typedTextSpan = document.querySelector(".typed-text");
  const cursorSpan = document.querySelector(".cursor");

  let textArrayIndex = 0;
  let charIndex = 0;

  function type() {
    if (charIndex < textArray[textArrayIndex].length) {
      if (!cursorSpan.classList.contains("typing"))
        cursorSpan.classList.add("typing");
      typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
      charIndex++;
      setTimeout(type, typingDelay);
    } else {
      cursorSpan.classList.remove("typing");
      setTimeout(erase, newTextDelay);
    }
  }

  function erase() {
    if (charIndex > 0) {
      if (!cursorSpan.classList.contains("typing"))
        cursorSpan.classList.add("typing");
      typedTextSpan.textContent = textArray[textArrayIndex].substring(
        0,
        charIndex - 1
      );
      charIndex--;
      setTimeout(erase, erasingDelay);
    } else {
      cursorSpan.classList.remove("typing");
      textArrayIndex++;
      if (textArrayIndex >= textArray.length) textArrayIndex = 0;
      setTimeout(type, typingDelay + 1100);
    }
  }

  document.addEventListener("DOMContentLoaded", function() {
    if (textArray.length) setTimeout(type, newTextDelay + 250);
  });
  // END - Code from tutorial

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

export default TypeWriter;

const StyledText = styled.span`
  font-weight: normal;
  color: #dd7732;
`;

Вот CodeSandBox , вилки приветствуются:)