Package Exports
- react-textra
- react-textra/lib/Textra.js
- react-textra/lib/esm/Textra.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-textra) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-textra 
Animate text in react. demo
- Simple
- No dependency
- Multiple effects
Installing
npm i react-textraExamples:
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
| Prop | Detail | Type | Default |
|---|---|---|---|
| data (required) | Array of data to be animated | Array | null |
| effect | Animation effect | String | simple |
| stopDuration | How long should it stop while showing each item | Number | 3000ms |
| duration | Animation duration | Number | 500ms |
| onUpdate | Will be called on every update, giving the index of animated item. | (index: number) => void | - |
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'/>