maxeth / react-type-animation

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

Make writing effect word by word #41

Closed aakrem closed 1 year ago

aakrem commented 1 year ago

Right now the the animation is done letter by letter. It would be also nice to have the animation display text word by word so it gives a readability closer to the human one.

maxeth commented 1 year ago

Hey,

this would be possible with the custom splitter function introduced in this PR. I'm extremely short on time rn, but I'll do by best to review, test and merge it in the near future.

maxeth commented 1 year ago

You can do this now with npm i react-type-animation@3.2.0. I added a section to the docs but they're not published yet as netlify apparently suspended my account for some reason...

Here's an example:

 <TypeAnimation
        splitter={(str) => str.split(/(?= )/)} // 'abc' => ['a', ' b', ' c']
        sequence={[
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
          3000,
          '',
        ]}
        speed={{ type: 'keyStrokeDelayInMs', value: 30 }}
        omitDeletionAnimation={true}
        style={{ fontSize: '1em', display: 'block', minHeight: '200px' }}
        repeat={Infinity}
      />