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 and usage examples of the animation can be found at https://react-type-animation.netlify.app/examples.

Usage

A common typewriter animation for a landing page would look like this:

1import { TypeAnimation } from 'react-type-animation';
2
3const ExampleComponent = () => {
4  return (
5    <TypeAnimation
6      sequence={[
7        // Same substring at the start will only be typed out once, initially
8        'We produce food for Mice',
9        1000, // wait 1s before replacing "Mice" with "Hamsters"
10        'We produce food for Hamsters',
11        1000,
12        'We produce food for Guinea Pigs',
13        1000,
14        'We produce food for Chinchillas',
15        1000
16      ]}
17      wrapper="span"
18      speed={50}
19      style={{ fontSize: '2em', display: 'inline-block' }}
20      repeat={Infinity}
21    />
22  );
23};

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 | Promise)>	['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
preRenderFirstString	no	boolean	false, true	If true, the first string of your sequence will not be animated and initially (pre-)rendered	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	-	-	-
splitter	no	(text: string) => Array	(str) => new GraphemeSplitter().splitGraphemes(str)	Used for splitting complex characters, see grapheme-splitter for more details	String.split('')

---

npm / github Credits: typical Shoutouts/Supporters: blockig