Hola, me gustaría mostrar mis enlaces sociales después de que haya terminado la oración mecanografiada.
No estoy seguro de cómo lograr esto, ya que soy un principiante en React.
Ver mi código a continuación:
`
import React, { useEffect } from 'react' import { Link } from 'gatsby' import Typewriter from "typewriter-effect"; import '../styles/base.css' function TypewriterEffect() { return ( <div className="typewriter"> <Typewriter onInit={(typewriter)=> { typewriter .typeString("Hello World!") .pauseFor(1000) .deleteAll() .typeString("I am a web developer living and working in Philadelphia, PA.") .typeString(" Contact me through my social links below: ") .pauseFor(1000) .start() document.getElementsByClassName('social')[0].classList.add('visible') }} /> </div> ) } const IndexPage = () => { return ( <> <header> <h1> <Link className="hzr" to="/"><hzr/></Link> </h1> <TypewriterEffect/> <p id="typewriter"></p> <div> <Link className="social" to="https://github.com/hannarosenfeld">> github</Link> </div> </header> </> ) } export default IndexPage`
Intenté adjuntar un atributo css en la onInit={(typewriter)=\> {..})} , lamentablemente eso no funcionó.
Código que usé:
document.getElementsByClassName('social')[0].classList.add('visible')
No pude encontrar nada en la API de Typewriter que te permita saber cuándo finalizó. Sin embargo, hay una manera simple de lograr esto, que es simplemente calcular cuánto tiempo lleva escribir todo y escribir un setTimeout para ese tiempo que cambia una propiedad que mostrará sus enlaces. Algo como esto
import React, { useEffect, useState } from 'react'; import Typewriter from 'typewriter-effect'; const TypeWritter = () => { const [showLinks, setShowLinks] = useState(false); useEffect(() => { setTimeout(() => { setShowLinks(true); }, 20400); }, []); return ( <div className="typewriter"> <Typewriter onInit={(typewriter) => { typewriter .typeString('Hello World!') .pauseFor(1000) .deleteAll() .typeString( 'I am a web developer living and working in Philadelphia, PA.' ) .typeString(' Contact me through my social links below: ') .pauseFor(1000) .start(); }} /> {showLinks && <div>your links</div>} </div> ); }; export default TypeWritter;Ejemplo del código en ejecución: https://stackblitz.com/edit/react-mui-krpgmy?file=TypeWritter.jsx