Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ansi-to-react with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var ansiToReact = require("ansi-to-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ansi-to-react v5.0.0

ANSI to React Elements

ansi-to-react

This package convert ANSI escape codes to formatted text output for React.

Installation

$ yarn add ansi-to-react
$ npm install --save ansi-to-react

Usage

Basic

The example below shows how we can use this package to render a string with ANSI escape codes.

import Ansi from "ansi-to-react";

export function () => {
  return <Ansi>
    {'\u001b[34mhello world'}
  </Ansi>;
};

Will render

<code>
    <span style="color:rgb(0, 0, 187)">hello world</span>
</code>

Classes

Style with classes instead of style attribute.

<Ansi useClasses>
    {'\u001b[34mhello world'}
</Ansi>;

Will render

<code>
    <span class="ansi-blue">hello world</span>
</code>

Class Names

Font colorBackground Color
ansi-blackansi-bright-black
ansi-redansi-bright-red
ansi-greenansi-bright-green
ansi-yellowansi-bright-yellow
ansi-blueansi-bright-blue
ansi-magentaansi-bright-magenta
ansi-cyanansi-bright-cyan
ansi-whiteansi-bright-white

Documentation

We're working on adding more documentation for this component. Stay tuned by watching this repository!

Support

If you experience an issue while using this package or have a feature request, please file an issue on the issue board and add the pkg:ansi-to-react label.

License

BSD-3-Clause

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free