{"id":18718,"library":"react-type-animation","title":"react-type-animation","description":"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.","status":"active","version":"3.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/maxeth/react-type-animation","tags":["javascript","react","reactjs","animation","typing","typewriter","react typewriter","typing animation","type animation","typescript"],"install":[{"cmd":"npm install react-type-animation","lang":"bash","label":"npm"},{"cmd":"yarn add react-type-animation","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-type-animation","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"requires React >=15.0.0","package":"react","optional":false},{"reason":"requires react-dom >=15.0.0","package":"react-dom","optional":false},{"reason":"runtime prop validation","package":"prop-types","optional":false}],"imports":[{"note":"This is a named export, not default. Also not available via require in CJS contexts.","wrong":"import TypeAnimation from 'react-type-animation'","symbol":"TypeAnimation","correct":"import { TypeAnimation } from 'react-type-animation'"},{"note":"CommonJS usage requires destructuring.","wrong":"const TypeAnimation = require('react-type-animation')","symbol":"TypeAnimation (require)","correct":"const { TypeAnimation } = require('react-type-animation')"},{"note":"There is no default export; only named export exists.","wrong":"import TypeAnimation from 'react-type-animation'","symbol":"TypeAnimation (default import)","correct":"import { TypeAnimation } from 'react-type-animation'"}],"quickstart":{"code":"import React from 'react';\nimport { TypeAnimation } from 'react-type-animation';\n\nfunction App() {\n  return (\n    <TypeAnimation\n      sequence={[\n        'Hello World!',\n        1000,\n        'Hello React!',\n        1000,\n        () => console.log('done'),\n      ]}\n      speed={50}\n      deletionSpeed={40}\n      wrapper=\"span\"\n      repeat={Infinity}\n      style={{ fontSize: '2em', display: 'inline-block' }}\n    />\n  );\n}\n\nexport default App;","lang":"typescript","description":"Minimal typewriter animation with a sequence of strings, delays, and infinite loop."},"warnings":[{"fix":"Add wrapper=\"div\" to all TypeAnimation instances, or apply a display block/inline-block style.","message":"The default wrapper changed from <div> to <span> in v3. This can break layout.","severity":"breaking","affected_versions":">=3.0.0 <3.0.0-beta.1"},{"fix":"Use key prop or force remount by changing key to trigger re-creation, or manage state externally.","message":"Component is permanently memoized; props changes (including sequence) are NOT reflected until hard reload.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Disable HMR for this component or reload the page manually after edits.","message":"Hot Module Replacement (HMR) does not work with this component – changes require a full page reload.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove cursor prop and style the cursor with CSS (e.g., border-right).","message":"Prop `cursor` is deprecated; use `cursor` style via CSS instead.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use import { TypeAnimation } from 'react-type-animation'.","cause":"Using default import instead of named import (e.g., import TypeAnimation from 'react-type-animation').","error":"TypeAnimation is not a function"},{"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.","cause":"Using a JSX wrapper element incorrectly or passing non-standard props to the wrapper.","error":"Warning: React does not recognize the `sequence` prop on a DOM element"},{"fix":"Ensure the sequence prop is exactly an array where alternating elements are strings (text), numbers (delay ms), or functions (callbacks).","cause":"Passing an invalid sequence array (e.g., null, undefined, or not an array of strings/numbers/functions).","error":"TypeError: Cannot read properties of undefined (reading 'map')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}