Hi, I would like to display my social links after the typescript sentence has finished.
I am unsure how to achieve this, since I am kind of a beginner in React.
See my code below:
`
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
`
I tried attaching a css attribute in the onInit={(typewriter)=\> {..})} function, sadly that did not work.
Code I used:
document.getElementsByClassName('social')[0].classList.add('visible')
I was not able to find anything on the Typewriter API that lets you know when it ended. However there is a simple way to achieve this, that is just calculating how long it takes to type everything out, and write a setTimeout for that time that changes a property that will show your links. Something like this
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;
Example of the code running: https://stackblitz.com/edit/react-mui-krpgmy?file=TypeWritter.jsx