Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
TypeAnimation
✓ import { TypeAnimation } from 'react-type-animation'
✗ import TypeAnimation from 'react-type-animation'
This is a named export, not default. Also not available via require in CJS contexts.
TypeAnimation (require)
✓ const { TypeAnimation } = require('react-type-animation')
✗ const TypeAnimation = require('react-type-animation')
CommonJS usage requires destructuring.
TypeAnimation (default import)
✓ import { TypeAnimation } from 'react-type-animation'
✗ import TypeAnimation from 'react-type-animation'
There is no default export; only named export exists.
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;
Debug
Known issues
breakingThe default wrapper changed from <div> to <span> in v3. This can break layout.fixAdd wrapper="div" to all TypeAnimation instances, or apply a display block/inline-block style.
affects: >=3.0.0 <3.0.0-beta.1
gotchaComponent is permanently memoized; props changes (including sequence) are NOT reflected until hard reload.fixUse key prop or force remount by changing key to trigger re-creation, or manage state externally.
affects: >=1.0.0
gotchaHot Module Replacement (HMR) does not work with this component – changes require a full page reload.fixDisable HMR for this component or reload the page manually after edits.
affects: >=1.0.0
deprecatedProp `cursor` is deprecated; use `cursor` style via CSS instead.fixRemove cursor prop and style the cursor with CSS (e.g., border-right).
affects: >=2.0.0
Errors
Common errors & fixes
TypeAnimation is not a function
Using default import instead of named import (e.g., import TypeAnimation from 'react-type-animation').
fixUse import { TypeAnimation } from 'react-type-animation'. Warning: React does not recognize the `sequence` prop on a DOM element
Using a JSX wrapper element incorrectly or passing non-standard props to the wrapper.
fixEnsure wrapper prop is a valid HTML tag string (e.g., 'span', 'div') and that all props are on TypeAnimation, not the wrapper element itself.
TypeError: Cannot read properties of undefined (reading 'map')
Passing an invalid sequence array (e.g., null, undefined, or not an array of strings/numbers/functions).
fixEnsure the sequence prop is exactly an array where alternating elements are strings (text), numbers (delay ms), or functions (callbacks).
Audit
Dependencies
reactrequiredrequires React >=15.0.0
react-domrequiredrequires react-dom >=15.0.0
prop-typesrequiredruntime prop validation