react-type-animation

A customizable React typing animation component.

Installation

1npm install react-type-animation

or

1yarn add react-type-animation

Requires a react and react-dom version of at least 15.0.0.

Live Demo

A live demo of the animation can be found at: https://react-type-animation.netlify.app/examples.

Usage

1import { TypeAnimation } from 'react-type-animation';
2
3const ExampleComponent = () => {
4  return (
5    <TypeAnimation
6      sequence={[
7        'One', // Types 'One'
8        1000, // Waits 1s
9        'Two', // Deletes 'One' and types 'Two'
10        2000, // Waits 2s
11        'Two Three', // Types 'Three' without deleting 'Two'
12        () => {
13          console.log('Sequence completed'); // Place optional callbacks anywhere in the array
14        }
15      ]}
16      wrapper="span"
17      cursor={true}
18      repeat={Infinity}
19      style={{ fontSize: '2em', display: 'inline-block' }}
20    />
21  );
22};

Documentation

The docs with props, options and common problem solutions can be found at: https://react-type-animation.netlify.app/.

Migrating to v3

The default wrapper is now <span> instead of <div>: To migrate, add a display: inline-block/block or wrapper="div" to all <TypeAnimation/> occurances with unspecified wrapper.

Usage Notes

Immutability

Due to the nature of the animation, this component is permanently memoized, which means that the component never re-renders unless you hard-reload the page, and hence props changes will not be reflected.

Hot Reload NOT Supported

Because the TypeAnimation component is memoized and never re-rendered (see above), yet Hot Reload attempts to re-render the component, changes to the TypeAnimation component will not render until you hard-reload the page.

Hence, whenever you make changes to the TypeAnimation component, you unfortunately have to reload your page.

Props

See https://react-type-animation.netlify.app/options for more details.

Prop	Required	Type	Example	Description	Default
sequence	yes	Array<number | string | () => void>	['One', 1000, 'Two', () => console.log("done")]	Animation sequence: [TEXT, DELAY-MS, CALLBACK]	-
wrapper	no	string	p,h2,div, strong	HTML element tag that wraps the typing animation	span
speed	no	1,2,..,99 | {type: "keyStrokeDelayInMs", value: number}	45, {type: "keyStrokeDelayInMs", value: 100}	Speed for the writing of the animation	40
deletionSpeed	no	1,2,..,99 | {type: "keyStrokeDelayInMs", value: number}	45, {type: "keyStrokeDelayInMs", value: 100}	Speed for deleting of the animation	speed
omitDeletionAnimation	no	boolean	false, true	If true, deletions will be instant and without animation	false
repeat	no	number	0, 3, Infinity	Amount of animation repetitions	0
cursor	no	boolean	false, true	Display default blinking cursor css-animation	true
className	no	string	custom-class-name	HTML class name applied to the wrapper to style the text	-
style	no	object	{fontSize: '2em'}	JSX inline style object	-
ref	no	HTMLElement | null	-	-	-

---

npm / github Credits: typical Shoutouts/Supporters: blockig