{"id":18115,"library":"ansi-to-react","title":"ansi-to-react","description":"Convert ANSI escape codes (e.g., terminal colors) to formatted React elements. Current stable version: 6.2.6 (January 2026). Maintained by nteract, ships TypeScript types, supports React 16.3+ through 19. Supports both inline styles and CSS classes. Lightweight, no dependencies beyond React and react-dom peer deps.","status":"active","version":"6.2.6","language":"javascript","source_language":"en","source_url":"https://github.com/nteract/ansi-to-react","tags":["javascript","ansi","react","typescript"],"install":[{"cmd":"npm install ansi-to-react","lang":"bash","label":"npm"},{"cmd":"yarn add ansi-to-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add ansi-to-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency","package":"react","optional":false},{"reason":"Required peer dependency","package":"react-dom","optional":false}],"imports":[{"note":"Default export only; named import will result in undefined.","wrong":"import { Ansi } from 'ansi-to-react'","symbol":"Ansi","correct":"import Ansi from 'ansi-to-react'"},{"note":"CommonJS users must access .default property.","wrong":"const Ansi = require('ansi-to-react')","symbol":"Ansi","correct":"const Ansi = require('ansi-to-react').default"},{"note":"Use import type for TypeScript to avoid runtime import; AnsiProps is exported as a named type.","wrong":"import { AnsiProps } from 'ansi-to-react'","symbol":"type AnsiProps","correct":"import type { AnsiProps } from 'ansi-to-react'"}],"quickstart":{"code":"import React from 'react';\nimport Ansi from 'ansi-to-react';\n\nfunction MyComponent() {\n  const coloredText = '\\u001b[34mblue text\\u001b[0m and \\u001b[31mred text';\n  return <Ansi>{coloredText}</Ansi>;\n}\n\nexport default MyComponent;","lang":"typescript","description":"Renders a string with ANSI escape codes as styled React elements using default inline styles."},"warnings":[{"fix":"Use `import Ansi from 'ansi-to-react'` instead of `import { Ansi } from 'ansi-to-react'`.","message":"The package exports a default component, not a named one. Attempting a named import will give undefined.","severity":"gotcha","affected_versions":"*"},{"fix":"Use `const Ansi = require('ansi-to-react').default`.","message":"CommonJS require must use .default property; otherwise the component will be undefined.","severity":"gotcha","affected_versions":"*"},{"fix":"Always validate or sanitize input ANSI strings before passing to the component if you expect strict parsing.","message":"The package silently ignores invalid ANSI escape codes; no validation is performed and broken sequences may be rendered as plain text.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to v6 which uses modern React patterns and hooks.","message":"The package previously used React.createClass? Check old versions; current version uses functional components internally.","severity":"deprecated","affected_versions":"<6"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change to `import Ansi from 'ansi-to-react'`.","cause":"Using named import `{ Ansi }` instead of default import.","error":"TypeError: Cannot read properties of undefined (reading 'type')"},{"fix":"If using ESM, import default; if CJS, const Ansi = require('ansi-to-react').default;","cause":"Same as above, or using CommonJS without .default.","error":"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Run `npm install ansi-to-react` or `yarn add ansi-to-react`.","cause":"Package not installed or missing from node_modules.","error":"Module not found: Can't resolve 'ansi-to-react' in '/path/to/file'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}