# react-shell-color

> Javascript parse [ANSI escape code](https://en.wikipedia.org/wiki/ANSI_escape_code) and render in React, Recode with typescript

Latest version **1.1.1** (published 2022-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-shell-color
pnpm add react-shell-color
yarn add react-shell-color
bun add react-shell-color
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-02-17 |
| First published | 2022-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 68.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | clay-wang |

## Links

- npm: https://www.npmjs.com/package/react-shell-color
- Repository: https://github.com/ClayWangT/shell-color
- Homepage: https://github.com/ClayWangT/shell-color#readme
- Issues: https://github.com/ClayWangT/shell-color/issues
- npm.io page: https://npm.io/package/react-shell-color

## Dependencies (1)

- [wolfy87-eventemitter](https://npm.io/package/wolfy87-eventemitter.md) ^5.2.2

## Recent versions

- 1.1.1 (latest) — 2022-02-17
- 1.1.0 — 2022-02-17
- 1.0.4 — 2022-01-20
- 1.0.3 — 2022-01-07
- 1.0.2 — 2022-01-07
- 1.0.1 — 2022-01-07
- 1.0.0 — 2022-01-07

## README

# react-shell-color

Javascript parse [ANSI escape code](https://en.wikipedia.org/wiki/ANSI_escape_code) and render in React, Recode with typescript

![style](doc/style.png)

# Install

```sh
npm install --save react-shell-color
```

# Component

Common parameters

```tsx
import React from 'react';
import ReactShellColor from 'react-shell-color';

export default () => <ReactShellColor text="\x1b[30m black\n\x1b[m\x1b[31m red\nend" />;
```

# React Hooks

```tsx
import { useShellColor } from 'react-shell-color';

export default function ReactShellColor(props: { text: string }) {
  const { tags, shellColor } = useShellColor(props.text);
  return <>{tags}</>;
}
```

# Shell Color Usage For DOM

```ts
import {SGRStyle} from "react-shell-color";

sc.on('snippet', function (tag: React.Node, text: string, style: SGRStyle) {
  cosnt domTag = document.createElement('span');
  domTag.style = Object.assign(style, domTag.style);
  domTag.innerText = text;
  document.body.appendChild(domTag)
})

```

# Other Usage:

- https://github.com/valaxy/shell-color/

# ChangeLog

- 1.1.0 performance optimize
- 1.0.0 init project

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