maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.

Home Page:https://react-type-animation.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Make writing effect word by word

aakrem opened this issue · comments

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.

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.

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}
      />