react-textra v0.2.0

react-textra

Animate text in react. demo

• Simple
• No dependency
• Multiple effects

Installing

npm i react-textra

Examples:

import Textra from 'react-textra'

function MyComponent() {
   return (
     <div>
       <Textra effect='flash' data={['one', 'two', 'three']} />
     </div>
   ) 
}

If you want to stop longer:

<Textra 
  effect='flash' 
  stopDuartion={4000} 
  data={['one', 'two', 'three']} />

If you want to change animation duration:

<Textra 
  effect='flash'
  duration={1000} 
  data={['one', 'two', 'three']} />

Props

Effects

There are 9 types of effects available: | effect | | :------- | | simple | | rightLeft | | leftRight | | topDown | | downTop | | flash | | flip | | press | | scale |

A11y concerns

We do not provide any aria attributes by default. But if you see updates important and you want to let screen reader users know of them, you can use aria-live and aria-relevant.

Here is an example of how you can use these attributes alongside this library:

<Textra
  duration={2000}
  data={['one', 'two']}
  aria-live='polite'
  aria-relevant='text removals'/>