Importé reaccionar-simple-typewriter en mi proyecto y las palabras en mi matriz Typewriter fallan y la primera letra de cada palabra aparece junto a mi primera oración. Quiero que mi primera línea de texto esté quieta y no se mueva y cuando la matriz de palabras={["MÚSICA", "ARTE", "TALENTO", "PUBLICACIÓN"]} desaparezca.
Aterrizaje.js
import Typewriter from "react-simple-typewriter";
<h2 id="text">
THE FUTURE OF{" "}
<span>
{/* Style will be inherited from the parent element */}
<Typewriter
loop
cursor
cursorStyle="_"
typeSpeed={60}
deleteSpeed={40}
delaySpeed={1000}
words={["MUSIC", "ART", "TALENT", "PUBLISHING"]}
/>
{/* <Typist sentences={["MUSIC", "ART", "TALENT", "PUBLISHING"]} /> */}
</span>
</h2>
------------------------------------
Agregué inline-block para permitirme colocar el elemento de texto manteniendo el ancho y el ancho del texto. Se pueden establecer propiedades de altura, o podemos pensar en un elemento a nivel de bloque, que no tiene que comenzar con una nueva línea. rema de bloque en líneaestá en línea con todo el texto alrededor del elemento y aparece igual que en línea.
<h2 id="text">THE FUTURE OF </h2>
<h2 id="text">
<span
style={{
display: "inline-block",
}}
>
<Typewriter
loop
cursor
cursorStyle="_"
typeSpeed={60}
deleteSpeed={200}
delaySpeed={1000}
words={["MUSIC", "ART", "TALENT", "PUBLISHING"]}
/>
</span>
</h2>
------------------------------------
Después de tener muchos problemas yo también, tuve que escribir mi propio componente Typewriter totalmente compatible con Typecript y la versión más reciente de React. Simplemente instálelo con npm i react-ts-typewriter, importe usando import Typewriter desde 'react-ts-typewriter' y llámelo usando <Typewriter text="Texto de ejemplo" />o <Texto de máquina de escribir={["matrices", "también", "trabajo"]} />.