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!

License

MIT