I want to stop the text generating animation at the middle of the content like ChatGPT

[kananimaulik26]

Is it possible to provide one button like "Stop generating", and when the user will click on this button then text-generating animation will stop If there is no such kind of functionality in this package, then any idea how we can do this? It will really helpful to me, apart from that this package is good for text animation Thanks

[maxeth]

You will have to conditionally render the component using react state

hasUserPressedStop ? <TypeAnimation/> : <span>{currentlyTypedOutText}</span>

where currentlyTypedOutText is the content of the dom element of the animation component - so basically the text that was typed out before the user pressed stop.

To get that content you need to pass a ref first

const ref = React.createRef<HTMLSpanElement>(); 

<TypeAnimation ref={ref} {...} />

and then do something like this I think

ref.current.innerText

---

You'll have to play around with it, but this is not a package-specific feature, it's just traditional javascript/react.