tameemsafi / typewriterjs

A simple yet powerful native javascript plugin for a cool typewriter effect.
https://www.npmjs.com/package/typewriter-effect
MIT License
2.46k stars 220 forks source link

How to completely stop the typing using React #218

Open dids-reyes opened 6 months ago

dids-reyes commented 6 months ago

This is rendered in Modal, now the problem is when i close the modal and open another, there's 2 instance one running in display and the previous one that is running in background waiting to finish typing.

  <Typewriter
    options={{delay: 50, loop: false}}
    onInit={typewriter => {
      typewriter
        .typeString(newMessage)
        .pauseFor(1000)
        .callFunction(() => {
         // this is called when newMessage completes typing
          if (trackId) {
            setShow(true);
          }
        })
        .start();
    }}
  />

what i want to do is call a stop or restart of event so it won't reach the callFunction on the previous one that is running in background.

once handleCloseModal is called it should restart and only one Typewriter should start

  const handleCloseModal = () => {
    Typewriter.restart()
  };

is this possible? and how can i achieve this using react?