ansi-to-react

6.2.6 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

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

fix

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

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

cause Same as above, or using CommonJS without .default.

fix

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

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

cause Package not installed or missing from node_modules.

fix

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

Warnings

gotcha The 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'`.

gotcha CommonJS require must use .default property; otherwise the component will be undefined. ↓

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

gotcha The 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.

deprecated The 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.

Install

npm install ansi-to-react

yarn add ansi-to-react

pnpm add ansi-to-react

Imports

Ansi
wrong
```
import { Ansi } from 'ansi-to-react'
```
correct
```
import Ansi from 'ansi-to-react'
```
Default export only; named import will result in undefined.

Ansi

wrong

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

correct

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

CommonJS users must access .default property.

type AnsiProps
wrong
```
import { AnsiProps } from 'ansi-to-react'
```
correct
```
import type { AnsiProps } from 'ansi-to-react'
```
Use import type for TypeScript to avoid runtime import; AnsiProps is exported as a named type.

Quickstart

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;