Closed aakrem closed 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.
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}
/>
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.