# @dash4/react-xterm

> react xterm component

Latest version **0.9.3** (published 2020-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dash4/react-xterm
pnpm add @dash4/react-xterm
yarn add @dash4/react-xterm
bun add @dash4/react-xterm
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.9.3 |
| Published | 2020-12-07 |
| First published | 2019-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 253.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Simon Mollweide |
| Maintainers | smollweide |

## Links

- npm: https://www.npmjs.com/package/@dash4/react-xterm
- Repository: https://github.com/smollweide/dash4
- Homepage: https://github.com/smollweide/dash4#readme
- Issues: https://github.com/smollweide/dash4/issues
- npm.io page: https://npm.io/package/@dash4/react-xterm

## Dependencies (2)

- [xterm](https://npm.io/package/xterm.md) 3.12.2
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) 1.5.1

## Recent versions

- 0.9.3 (latest) — 2020-12-07
- 0.9.2 — 2020-11-18
- 0.9.1 — 2020-11-18
- 0.9.0 — 2020-08-22
- 0.8.5 — 2020-06-05
- 0.8.4 — 2020-05-09
- 0.8.3 — 2020-05-01
- 0.8.2 — 2020-04-09
- 0.8.1 — 2020-03-15
- 0.8.0 — 2020-01-24
- 0.7.1 — 2019-12-20
- 0.7.0 — 2019-11-15
- 0.6.0 — 2019-11-03
- 0.5.2 — 2019-10-24
- 0.5.1 — 2019-07-20
- … 6 more at https://npm.io/package/@dash4/react-xterm/versions

## README

<div align="center">
<h1>React Xterm</h1>

[Xterm](https://github.com/xtermjs/xterm.js) react component
<br />

[![NPM version](https://badge.fury.io/js/%40dash4%2Freact-xterm.svg)](https://www.npmjs.com/package/@dash4/react-xterm)
[![License](https://img.shields.io/badge/license-MIT-green.svg)](http://opensource.org/licenses/MIT) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Prettier](https://img.shields.io/badge/Code%20Style-Prettier-green.svg)](https://github.com/prettier/prettier)
![TypeScript-ready](https://img.shields.io/npm/types/@dash4/react-xterm.svg)

<br />
</div>

The following documentation is just relevant for dash4 plugin development. For informations on how to use Dash4 please read this: [Dash4 documentation](https://github.com/smollweide/dash4/blob/master/README.md)

## Installation

```shell
npm install @dash4/react-xterm --save
```

## Usage

```tsx
import React, { useState } from 'react';
import { Term } from '@dash4/react-xterm';
import '@dash4/react-xterm/lib/ReactXterm.css';

const MyComponent = ({ id }: { id: string }) => {
	const [term, setTerm] = useState<Term | undefined>(undefined);

	function handleTermRef(uid: string, xterm: Term) {
		setTerm(xterm);
	}

	function handleStart() {
		term.write('npm start');
	}

	return (
		<>
			<Term ref_={handleTermRef} uid={id} />
			<button onClick={handleStart}>start</button>
		</>
	);
};
```

## Props

```tsx
interface IProps {
	uid: string | number;
	ref_: (id: string | number, term: Term | null) => void;
	isTermActive?: boolean;
	padding?: number | string;
	cleared?: boolean;
	rows?: number;
	cols?: number;
	term?: Term;
	customChildrenBefore?: React.ReactNode;
	customChildren?: React.ReactNode;
	backgroundColor?: string;
	webGLRenderer?: any;
	scrollback?: boolean;
	cursorShape?: TCursorStyles;
	cursorBlink?: boolean;
	fontFamily?: string;
	fontSize?: string | number;
	fontWeight?: string | number;
	fontWeightBold?: string | number;
	lineHeight?: string | number;
	letterSpacing?: string | number;
	foregroundColor?: string | number;
	cursorColor?: string | number;
	cursorAccentColor?: string | number;
	selectionColor?: string | number;
	macOptionSelectionMode?: string;
	modifierKeys?: {
		altIsMeta?: boolean;
	};
	colors?: {
		black?: string | number;
		red?: string | number;
		green?: string | number;
		yellow?: string | number;
		blue?: string | number;
		magenta?: string | number;
		cyan?: string | number;
		white?: string | number;
		lightBlack?: string | number;
		lightRed?: string | number;
		lightGreen?: string | number;
		lightYellow?: string | number;
		lightBlue?: string | number;
		lightMagenta?: string | number;
		lightCyan?: string | number;
		lightWhite?: string | number;
	};
	onTitle?: (...args: any[]) => void;
	onActive?: (...args: any[]) => void;
	onData?: (...args: any[]) => void;
	onResize?: (...args: any[]) => void;
	onCursorMove?: (...args: any[]) => void;
}
```

## License

The @dash4/react-xterm is [MIT licensed](./LICENSE)

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