Make writing effect word by word
aakrem opened this issue · 2 comments
aakrem commented
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
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
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}
/>