React-typing-animation

 !Licence

> 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

``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 | | 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 |

$3

`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 | |

$3

`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 | |

$3

`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 | |

$3

`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