how to use autoTyping.js in react jsx?-CodePudding

I making a portfolio, and i want to apply animation on my name by adding the popular auto typing affect, changing my name to various other strings like fullstack, frontend,..etc.

I found this lightweight library that creates animated typing effects, but i dont know how to properly implement the script into my jsx file. I tried this below but i can't render the animation at all.

These are my attempts so far:

I Created src/autotyping.js file:


var AutoTyping = function (e) { var t = {}; function r(n) { if (t[n])
//...

const exampleText = ['Fullstack.', 'FrontEnd', 'BackEnd', 'Designer'];
const exampleTyping = new AutoTyping('#text', exampleText, {
    typeSpeed: 50,
    deleteSpeed: 50,
    waitBeforeDelete: 2000,
    waitBetweenWords: 500,
});
exampleTyping.start()

In jsx file where i want to render the animation:

import { autotyping } from "./../../autotyping";

const About= () => {
return (

<p id="text" >
   <autotyping>
      <script src="./../../autotyping" type="text/javascript"/>
   </autotyping>
</p>

)}

CodePudding user response：

You have to run any imperative code inside useEffect

The component

const AutoTyping = () => {
  useEffect(() => {
    const exampleText = ['Fullstack.', 'FrontEnd', 'BackEnd', 'Designer'];
    const exampleTyping = new AutoTyping('#text', exampleText, {
      typeSpeed: 50,
      deleteSpeed: 50,
      waitBeforeDelete: 2000,
      waitBetweenWords: 500,
    });
    exampleTyping.start()
  })
}

Usage

const About = () => {
  return (
    <p id="text" >
      <AutoTyping />
    </p>
  )
}

To load the component, add script tag to the HTML, don't inset it into jsx