Registry / serialization / ansi-to-react

ansi-to-react

library6.2.6jsnpmunverified

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.

serialization web-framework

npm install ansi-to-react

github ↗package ↗

INSTALL

IMPORT

SIG · ANSI-TO-REACT

ansi-to-react

serializationjavascriptv6.2.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Ansi

✓ import Ansi from 'ansi-to-react'

✗ import { Ansi } from 'ansi-to-react'

Default export only; named import will result in undefined.

Ansi

✓ const Ansi = require('ansi-to-react').default

✗ const Ansi = require('ansi-to-react')

CommonJS users must access .default property.

type AnsiProps

✓ import type { AnsiProps } from 'ansi-to-react'

✗ import { AnsiProps } from 'ansi-to-react'

Use import type for TypeScript to avoid runtime import; AnsiProps is exported as a named type.

Renders a string with ANSI escape codes as styled React elements using default inline styles.

import React from 'react'; import Ansi from 'ansi-to-react'; function MyComponent() { const coloredText = '\u001b[34mblue text\u001b[0m and \u001b[31mred text'; return <Ansi>{coloredText}</Ansi>; } export default MyComponent;

Debug

Known issues

gotchaThe package exports a default component, not a named one. Attempting a named import will give undefined.

fix

Use `import Ansi from 'ansi-to-react'` instead of `import { Ansi } from 'ansi-to-react'`.

affects: *

gotchaCommonJS require must use .default property; otherwise the component will be undefined.

fix

Use `const Ansi = require('ansi-to-react').default`.

affects: *

gotchaThe package silently ignores invalid ANSI escape codes; no validation is performed and broken sequences may be rendered as plain text.

fix

Always validate or sanitize input ANSI strings before passing to the component if you expect strict parsing.

affects: *

deprecatedThe package previously used React.createClass? Check old versions; current version uses functional components internally.

fix

Upgrade to v6 which uses modern React patterns and hooks.

affects: <6

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'type')

Using named import `{ Ansi }` instead of default import.

fix

Change to `import Ansi from 'ansi-to-react'`.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Same as above, or using CommonJS without .default.

fix

If using ESM, import default; if CJS, const Ansi = require('ansi-to-react').default;

Module not found: Can't resolve 'ansi-to-react' in '/path/to/file'

Package not installed or missing from node_modules.

fix

Run `npm install ansi-to-react` or `yarn add ansi-to-react`.

Upgrade

Version history

6.2.6latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency

react-domrequiredRequired peer dependency

Agent activity

28 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/nteract/ansi-to-react ↗

packagehttps://www.npmjs.com/package/ansi-to-react ↗