# @cocalc/ansi-to-react

> ANSI to React Elements

Latest version **7.0.0** (published 2023-03-24) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @cocalc/ansi-to-react
pnpm add @cocalc/ansi-to-react
yarn add @cocalc/ansi-to-react
bun add @cocalc/ansi-to-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.0.0 |
| Published | 2023-03-24 |
| First published | 2022-11-01 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 1 |
| Author | Kyle Kelley |
| Maintainers | wstein, hasch |
| Keywords | ansi, react |

## Links

- npm: https://www.npmjs.com/package/@cocalc/ansi-to-react
- Repository: https://github.com/sagemathinc/ansi-to-react
- Homepage: https://github.com/sagemathinc/ansi-to-react#readme
- Issues: https://github.com/sagemathinc/ansi-to-react/issues
- npm.io page: https://npm.io/package/@cocalc/ansi-to-react

## Dependencies (2)

- [anser](https://npm.io/package/anser.md) ^2.1.1
- [escape-carriage](https://npm.io/package/escape-carriage.md) ^1.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 7.0.0 (latest) — 2023-03-24
- 6.0.13 — 2022-11-01
- 6.0.12 — 2022-11-01
- 6.0.11 — 2022-11-01

## README

# ansi-to-react

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

## Installation

```
$ npm install ansi-to-react
```

## Usage

### Basic

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

```javascript
import Ansi from "ansi-to-react";

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

Will render:

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

### Classes

Style with classes instead of `style` attribute.

```javascript
<Ansi useClasses>{"\u001b[34mhello world"}</Ansi>
```

Will render

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

#### Class Names

| Font color             | Background Color |
| ---------------------- | ---------------- |
| ansi-black-fg          | ansi-black-bg    |
| ansi-red-fg            | ansi-red-bg      |
| ansi-green-fg          | ansi-green-bg    |
| ansi-yellow-fg         | ansi-yellow-bg   |
| ansi-blue-fg           | ansi-blue-bg     |
| ansi-magenta-fg        | ansi-magenta-bg  |
| ansi-cyan-fg           | ansi-cyan-bg     |
| ansi-white-fg          | ansi-white-bg    |
| ansi-bright-black-fg   |
| ansi-bright-red-fg     |
| ansi-bright-green-fg   |
| ansi-bright-yellow-fg  |
| ansi-bright-blue-fg    |
| ansi-bright-magenta-fg |
| ansi-bright-cyan-fg    |
| ansi-bright-white-fg   |

## Development

To develop on this project, fork and clone this repository on your local machine. Before making modifications, install the project's dependencies.

```
$ npm install
```

To run the test suite for this project, run:

```
$ npm test
```

## 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](https://github.com/nteract/ansi-to-react/issues),

## License

[BSD-3-Clause](https://choosealicense.com/licenses/bsd-3-clause/)

---
_Source: https://npm.io/package/@cocalc/ansi-to-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._