maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.
https://react-type-animation.netlify.app/
MIT License
353 stars 25 forks source link

Feature Request: Parameter to Remove Text Deletion #54

Closed findubk closed 2 months ago

findubk commented 4 months ago

Basically as the title says. As with other type-animation libraries, I am not sure why the default is to delete the text automatically, or at the very least, why there is no option to turn the deletion option off altogether. When first viewing the documentation, I had hoped that omitDeletionAnimation prevented the deletion from taking place, not simply removed the animation of the deletion. Adding in a parameter to prevent text deletion altogether would be very much appreciated.

maxeth commented 4 months ago

Thanks for your suggestion.

The core animation logic is declarative, so the addition/deletion of already existing text is based on the current sequence string, rather than a prop like deletion={true}. This allows you to delete stuff in the first few steps but not in later steps for example.

With an imperative prop, I'm not sure if this would be possible as a prop is global/for the complete sequence.

For now, you can simply do this...

sequence={["text 1", 500, "text 2", 500].reduce((acc, curr) => {
  if (typeof curr === "string") {
    const lastString = acc.filter((item) => typeof item === "string").pop() || "";
    acc.push((lastString + " " + curr).trim());
  } else {
    acc.push(curr);
  }
  return acc;
}, [])}

...to always prefix the already typed text to the current sequence string, so it doesn't delete the text you typed and you don't need to redundantly prefix the text.

Perhaps it would be better to export a util function for this .reduce as I don't really like the idea that a prop changes the core behaviour of the animation/sequence.