typewriterjs icon indicating copy to clipboard operation
typewriterjs copied to clipboard

stop() function not working on react component

Open nikkidurkin opened this issue 4 years ago • 1 comments

Hey! I'm using the react component, which is great (thanks so much for providing it).

However, when I call the stop() function, I still get the blinking cursor. I expect the typing effect to go away (i.e. the blinking cursor to disappear) but the stop function appears to do nothing.

I am programmatically chaining many events together, then calling a function at the end, then calling stop().

e.g. typewriter .typeString("Bla bla bla") .typeString("Bla bla bla") .typeString("Bla bla bla") . callFunction( () => { //some logic and then I call stop() on the typewriter }) .start()

Am I doing something wrong? Or is this a bug?

Cheers

nikkidurkin avatar Sep 27 '20 04:09 nikkidurkin

It seems the stop function makes disable the typing effect but not the blinking animation, personally I think is not a bug but that function it could be receive a boolean argument to turn off the blinking effect too, however you can remove it in the callFunction doing something like this

<Typewriter
  onInit={(typewriter) => {
    typewriter
      .typeString('Bla bla bla')
      .typeString(' Bla bla bla')
      .callFunction((state) => {
         // turn off animation
         state.elements.cursor.style.animation = 'none'
         // hide cursor
         // state.elements.cursor.style.display = 'none'
      })
      .start()
  }}
/>

AgusRdz avatar Oct 10 '20 23:10 AgusRdz