react-type-animation

3.2.0 verified Sat Apr 25 auth: no javascript

A customizable React typing animation component (v3.2.0) that creates typewriter effects with sequences of strings, delays, and callbacks. Ships with TypeScript definitions and supports React 15+. Unlike simpler typing libraries, it offers fine-grained control over speed (including per-character delay), deletion speed, cursor, repeat, and wrapper element. The component is permanently memoized (never re-renders on prop changes), which is a key design trade-off that developers must understand.

Common errors

error TypeAnimation is not a function ↓

cause Using default import instead of named import (e.g., import TypeAnimation from 'react-type-animation').

fix

Use import { TypeAnimation } from 'react-type-animation'.

error Warning: React does not recognize the `sequence` prop on a DOM element ↓

cause Using a JSX wrapper element incorrectly or passing non-standard props to the wrapper.

fix

Ensure wrapper prop is a valid HTML tag string (e.g., 'span', 'div') and that all props are on TypeAnimation, not the wrapper element itself.

error TypeError: Cannot read properties of undefined (reading 'map') ↓

cause Passing an invalid sequence array (e.g., null, undefined, or not an array of strings/numbers/functions).

fix

Ensure the sequence prop is exactly an array where alternating elements are strings (text), numbers (delay ms), or functions (callbacks).

Warnings

breaking The default wrapper changed from <div> to <span> in v3. This can break layout. ↓

fix Add wrapper="div" to all TypeAnimation instances, or apply a display block/inline-block style.

gotcha Component is permanently memoized; props changes (including sequence) are NOT reflected until hard reload. ↓

fix Use key prop or force remount by changing key to trigger re-creation, or manage state externally.

gotcha Hot Module Replacement (HMR) does not work with this component – changes require a full page reload. ↓

fix Disable HMR for this component or reload the page manually after edits.

deprecated Prop `cursor` is deprecated; use `cursor` style via CSS instead. ↓

fix Remove cursor prop and style the cursor with CSS (e.g., border-right).

Install

npm install react-type-animation

yarn add react-type-animation

pnpm add react-type-animation

Imports

TypeAnimation
wrong
```
import TypeAnimation from 'react-type-animation'
```
correct
```
import { TypeAnimation } from 'react-type-animation'
```
This is a named export, not default. Also not available via require in CJS contexts.

TypeAnimation (require)

wrong

const TypeAnimation = require('react-type-animation')

correct

const { TypeAnimation } = require('react-type-animation')

CommonJS usage requires destructuring.

TypeAnimation (default import)

wrong

import TypeAnimation from 'react-type-animation'

correct

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

There is no default export; only named export exists.

Quickstart

Minimal typewriter animation with a sequence of strings, delays, and infinite loop.

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

function App() {
  return (
    <TypeAnimation
      sequence={[
        'Hello World!',
        1000,
        'Hello React!',
        1000,
        () => console.log('done'),
      ]}
      speed={50}
      deletionSpeed={40}
      wrapper="span"
      repeat={Infinity}
      style={{ fontSize: '2em', display: 'inline-block' }}
    />
  );
}

export default App;