React-animate-text NPM

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.

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

Usage

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

import TextAnimation from 'react-animate-text';

<TextAnimation>Hello world</TextAnimation>;

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

import TextAnimation from 'react-animate-text';

<TextAnimation>
  <main>
    <h1>This is header</h1>
    <span style={{ color: 'red' }}>Exciting styled text</span>
    <div>
      <div>
        <div>
          <span>Man it is nested!</span>
        </div>
      </div>
    </div>
  </main>
</TextAnimation>;

try it yourself

Check the full API below

API

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.