react-typing-animation
v1.6.2
Published
[![npm version](https://img.shields.io/npm/v/react-typing-animation.svg)](https://npm.im/react-typing-animation) ![Licence](https://img.shields.io/npm/l/react-typing-animation.svg)
Downloads
1,821
Maintainers
Readme
React-typing-animation
A fully-featured typing animation in React that supports any valid JSX.
Motivation
There were other JS typing animations that existed when I created this, but they were all lacking in robust features. This component aims to support all of the following features:
✅ Type text from any valid JSX
✅ Preserve DOM structure/styling
✅ Change typing speed anywhere in tree
✅ Add a delay anywhere in tree
✅ Backspace animation
✅ Reset lines / full tree
✅ Loop functionality
✅ No dependencies (CSS or JS)
Demo
View the live demo
or
git clone https://github.com/adamjking3/react-typing-animation
cd react-typing-animation
npm install
npm start
Then open http://localhost:3000/ in a browser.
Feature requests and pull requests welcome
Installation
npm i --save react-typing-animation
Usage
import Typing from 'react-typing-animation';
const AnimatedTypingComponent = () => (
<Typing>
<span>This span will get typed.</span>
</Typing>
);
Documentation
| Property | Type | Default | Required |
| :--------------: | :--------: | :--------------------------------------------------------------------------------------------: | :------: |
| children | React node | | yes |
| className | string | | no |
| cursorClassName | string | | no |
| cursor | React node | <Cursor />
| no |
| hideCursor | boolean | false | no |
| speed | number | 50 (ms) | no |
| startDelay | number | 0 (ms) | no |
| loop | boolean | false | no |
| onStartedTyping | function | () => {} | no |
| onBeforeType | function | () => {} | no |
| onAfterType | function | () => {} | no |
| onFinishedTyping | function | () => {} | no |
Backspace Component
import Typing from 'react-typing-animation';
...
<Typing>
<span>This span will get typed, then erased.</span>
<Typing.Backspace count={20} />
</Typing>
| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | count | number | 1 | false | | | delay | number | 0 | false | | | speed | number | -1 | false | |
Delay Component
import Typing from 'react-typing-animation';
...
<Typing>
<div>
There will be a 1000ms delay here,
<Typing.Delay ms={1000} />
then this will be typed.
</div>
</Typing>
| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | ms | number | | yes | |
Speed Component
import Typing from 'react-typing-animation';
...
<Typing speed={50}>
This line will be typed at 50ms/character,
<Typing.Speed ms={200} />
then this will be typed at 200ms/character.
</Typing>
| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | ms | number | | yes | |
Reset Component
import Typing from 'react-typing-animation';
...
<Typing>
<span>This line will stay.</span>
<span>This line will get instantly removed after a 500 ms delay</span>
<Typing.Reset count={1} delay={500} />
</Typing>
| Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | count | number | 0 | false | | | delay | number | 0 | false | | | speed | number | -1 | false | |
Contributing
After cloning the repository and running npm install inside, you can use the following commands to develop and build the project.
# Starts a webpack dev server that hosts the demo at http://localhost:3000
npm start
# Lints the code with eslint
npm run lint
# Lints and builds the code, placing the result in the dist directory.
npm run build
Pull requests are welcome!