Проблема с использованием 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;
- 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;