# React-typing-animation [![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) > 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](https://adamjking3.github.io/react-typing-animation-example/) **or** ```shell 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 ```shell npm i --save react-typing-animation ``` ## Usage ```jsx import Typing from 'react-typing-animation'; const AnimatedTypingComponent = () => ( This span will get typed. ); ``` ## Documentation | Property | Type | Default | Required | | :--------------: | :--------: | :--------------------------------------------------------------------------------------------: | :------: | | children | React node | | yes | | className | string | | no | | cursorClassName | string | | no | | cursor | React node | [``](https://github.com/adamjking3/react-typing-animation/blob/master/src/Cursor.js) | 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 ```jsx import Typing from 'react-typing-animation'; ... This span will get typed, then erased. ``` | Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | count | number | 1 | false | | | delay | number | 0 | false | | | speed | number | -1 | false | | ### Delay Component ```jsx import Typing from 'react-typing-animation'; ...

There will be a 1000ms delay here, then this will be typed.

``` | Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | ms | number | | yes | | ### Speed Component ```jsx import Typing from 'react-typing-animation'; ... This line will be typed at 50ms/character, then this will be typed at 200ms/character. ``` | Property | Type | Default | Required | Description | | :------: | :----: | :-----: | :------: | :---------: | | ms | number | | yes | | ### Reset Component ```jsx import Typing from 'react-typing-animation'; ... This line will stay. This line will get instantly removed after a 500 ms delay ``` | 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. ```shell # 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! ## License [MIT](https://github.com/adamjking3/react-typing-animation/blob/master/LICENSE)

			Stars	Issues	Version	Updated	Created	Size
	react-typed		315	11	2.0.12	8 months ago	7 years ago
	react-typing-animation		265	32	1.6.2	6 years ago	7 years ago

react-typed vs react-typing-animation

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past