react-type-animation

A customizable React typing animation component.

Installation

npm install react-type-animation

or

yarn 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 could look like this:

import { TypeAnimation } from 'react-type-animation';

const ExampleComponent = () => {
  return (
    <TypeAnimation
      sequence={[
        // Same substring at the start will only be typed out once, initially
        'We produce food for Mice',
        1000, // wait 1s before replacing "Mice" with "Hamsters"
        'We produce food for Hamsters',
        1000,
        'We produce food for Guinea Pigs',
        1000,
        'We produce food for Chinchillas',
        1000,
      ]}
      wrapper="span"
      speed={50}
      style={{ fontSize: '2em', display: 'inline-block' }}
      repeat={Infinity}
    />
  );
};

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.

npm / github Credits: typical