Skip to content

README.md

Latest commit

 

History

History
108 lines (79 loc) · 3.09 KB

README.md

File metadata and controls

108 lines (79 loc) · 3.09 KB

@wterm/react

React component for wterm — a terminal emulator for the web.

Install

npm install @wterm/dom @wterm/react

Usage

import { Terminal } from "@wterm/react";
import "@wterm/react/css";

function App() {
  return <Terminal />;
}

By default, typed input is echoed back to the terminal. Use onData with useTerminal when you need control over input:

import { Terminal, useTerminal } from "@wterm/react";
import "@wterm/react/css";

function App() {
  const { ref, write } = useTerminal();

  return (
    <Terminal
      ref={ref}
      onData={(data) => {
        socket.send(data);
      }}
    />
  );
}

The WASM binary is embedded in the package — no extra setup required. To serve it separately instead, pass wasmUrl.

<Terminal> Props

Prop Type Default Description
cols number 80 Initial column count
rows number 24 Initial row count
wasmUrl string — Optional URL to serve the WASM binary separately (embedded by default)
theme string — Theme name (e.g. "solarized-dark", "monokai", "light")
autoResize boolean false Auto-resize based on container dimensions
cursorBlink boolean false Enable cursor blinking animation
debug boolean false Enable debug mode. Exposes a DebugAdapter on the underlying WTerm instance for inspecting escape sequences, cell data, render performance, and unhandled CSI sequences.
onData (data: string) => void — Called when the terminal produces data (user input or host response). When omitted, input is echoed back automatically.
onTitle (title: string) => void — Called when the terminal title changes
onResize (cols: number, rows: number) => void — Called on resize
onReady (wt: WTerm) => void — Called after WASM is loaded and the terminal is initialized

Standard div props (className, style, id, etc.) are forwarded to the container element.

useTerminal Hook

Returns a ref and imperative helpers for controlling the terminal:

const { ref, write, resize, focus } = useTerminal();
Return Type Description
ref React.RefObject<TerminalHandle> Pass to <Terminal ref={ref}>
write (data: string | Uint8Array) => void Write data to the terminal
resize (cols: number, rows: number) => void Resize the terminal
focus () => void Focus the terminal

TerminalHandle

The imperative handle exposed via ref:

interface TerminalHandle {
  write(data: string | Uint8Array): void;
  resize(cols: number, rows: number): void;
  focus(): void;
  readonly instance: WTerm | null;
}

Themes

Import the stylesheet to get the default theme and all built-in themes:

import "@wterm/react/css";

Switch themes via the theme prop:

<Terminal theme="monokai" />

Built-in: solarized-dark, monokai, light. Define custom themes with CSS custom properties.

License

Apache-2.0