{"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,"search_vec":"'16.3':30 '19':32 '2026':21 '6.2.6':19 'ansi':2,6,52 'ansi-to-react':1 'beyond':43 'class':39 'code':8 'color':11 'convert':5 'css':38 'current':16 'dep':50 'depend':42 'dom':48 'e.g':9 'element':15 'escap':7 'format':13 'inlin':35 'januari':20 'javascript':51 'lightweight':40 'maintain':22 'nteract':24 'peer':49 'react':4,14,29,44,47,53 'react-dom':46 'ship':25 'stabl':17 'style':36 'support':28,33 'termin':10 'type':27 'typescript':26,54 'version':18","created_at":"2026-04-25T07:36:32.623135+00:00","updated_at":"2026-04-25T07:36:32.623135+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/nteract/ansi-to-react","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/ansi-to-react","openapi_spec":null,"status_page":null,"smithery":null,"categories":["serialization","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}