Проблема с использованием typewriter-effect для анимации текста в React

Я пытаюсь использовать библиотеку typewriter-effect для анимации текста в моем приложении React. У меня возникла проблема с тем, что курсор не скрывается после завершения анимации. Я пытался установить cursor: '' в опциях Typewriter, когда анимация завершается, но это не работает. Есть ли способ скрыть курсор после завершения анимации? 1.test.jsx

import React, { useState } from 'react';
import classes from "./PageStyles/Test.css"
import Typewriter from 'typewriter-effect';
import CodeString from '../UI/Components/CodeString/CodeString';

const TestPage = () => {
  const [isAnimationComplete, setIsAnimationComplete] = useState(false);

  const handleAnimationComplete = () => {
    setIsAnimationComplete(true);
  };

  return (
    <>
      <div className='test-style'>
        <CodeString 
          customText="1" 
          customCode={
            <Typewriter
              options={{
          
                delay: 5,
                cursor: isAnimationComplete ? '' : '|',
                onComplete: handleAnimationComplete 
              }}
              onInit={(typewriter) => {
                typewriter
                  .typeString('A simple yet powerful native javascript')
                  .pauseFor(300)
                  .deleteChars(10)
                  .typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
                  .typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
                  .pauseFor(1000)
                  .start();
              }}
            />
          }
        />
            

    <CodeString 
        customText="2" 
        customCode="print"
    />

    <CodeString 
        customText="10" 
        customCode="print"
    />

    <CodeString 
        customText="10" 
        customCode="print"
    />
  </div>
</>
    
    );
};

export default TestPage;

  1. CodeString.jsx
import classes from "./CodeString.css";
import TypewriterComponent from 'typewriter-effect';

const CodeString = ({ customText, customCode }) => {
    return (
        <div className='container'>
            <div className='codestrText'>{customText}</div>
            <div className='code'>{customCode}</div>
        </div>
    );
};

export default CodeString;

Ответы (0 шт):