react-animate-text

> React tool for common text animations written in typescript

 

Install

You need to install this along with rxjs as it is peer dependency.

``bash
npm install react-animate-text rxjs
yarn add react-animate-text rxjs
`

Usage

To animate text simply wrap it in react-animate-text component

`js
import TextAnimation from 'react-animate-text';

Hello world;
`

simple as that! try it yourself

Actually it does not need to be text, you can pass any react composition, react-animate-text will animate text in order of they apperance. Styles and other attributes will be preserved

`js
import TextAnimation from 'react-animate-text';

| Prop | type | default value | required | description |
| -------------- | --------------------------------- | ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| animation | "type" \| "delete" \| "backspace" | "type" | no | Applied animation for texts
"type" - animates typing texts
"delete" - animates deleting texts
"backspace" - animates backspacing text |
| caret | React.Node | none | no | ReactNode used as caret.
Cared is displayed at the begining of delete animation and at the end of type and backspace animations. |
| charInterval | number | 200 | no | Interval between subsequent animation frames (typing/deleting/backspacing subsequent characters) in miliseconds |
| children | React.Node | none | yes | String or any react composition.
All included texts will be animated in order of their appearance. |
| onNextChar` | string => any | none | no | Function called every subsequent animation frame. It receives current displayed text as argument. | | |

License

MIT © prztrz