Skip to content

A React typewriter animation based on typical with extended functionality and customization.

License

Notifications You must be signed in to change notification settings

maxeth/react-type-animation

Repository files navigation

react-type-animation

npm version downloads license

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.

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