React Package - rahulpandita/react-term GitHub Wiki

The @next_term/react package provides React components that wrap WebTerminal from @next_term/web.

Terminal Component

Terminal is the primary component for embedding a terminal in a React application.

import { useRef } from 'react';
import { Terminal, type TerminalHandle } from '`@next_term/react`';

function MyTerminal() {
  const ref = useRef(TerminalHandle)(null);

  return (
    (Terminal
      cols={80}
      rows={24}
      fontSize={14}
      fontFamily="'JetBrains Mono', monospace"
      onData={(data) =) pty.write(data)}
      onResize={(cols, rows) => pty.resize(cols, rows)}
      onTitleChange={(title) => setTitle(title)}
      autoFit={true}
      ref={ref}
    />
  );
}

Props

Prop	Type	Default	Description
cols	number	80	Terminal width in columns
rows	number	24	Terminal height in rows
fontSize	number	14	Font size in pixels
fontFamily	string	'monospace'	CSS font family
fontWeight	number	400	Normal font weight
fontWeightBold	number	700	Bold font weight
theme	Theme	VS Code Dark	Color theme
scrollback	number	1000	Scrollback buffer size in lines
onData	(data: string) => void	—	Called when the user types or pastes
onResize	(cols: number, rows: number) => void	—	Called on terminal resize
onTitleChange	(title: string) => void	—	Called on OSC 0/2 title changes
autoFit	boolean	false	Automatically resize to fill the container
className	string	—	CSS class on the wrapper element
style	CSSProperties	—	Inline styles on the wrapper element
renderMode	'auto' | 'webgl' | 'canvas2d'	'auto'	Renderer selection
renderer	IRenderer	—	Custom renderer instance
useWorker	boolean	true	Enable off-main-thread parser
sharedContext	SharedWebGLContext	—	Shared WebGL context for multi-pane
paneId	string	—	Pane identifier when using shared context

TerminalHandle (Imperative Ref)

const ref = useRef(TerminalHandle)(null);

ref.current?.write('\x1b[32mgreen text\x1b[0m\r\n');
ref.current?.resize(120, 40);
ref.current?.focus();
ref.current?.blur();
ref.current?.fit(); // Requires autoFit or FitAddon

TerminalPane Component

TerminalPane renders a tree of terminal panes in horizontal or vertical split layouts. All panes share a single SharedWebGLContext for efficient multi-pane rendering.

import { useRef } from 'react';
import { TerminalPane, type TerminalPaneHandle } from '`@next_term/react`';

const layout = {
  horizontal: {
    children: [{ id: 'left' }, { id: 'right' }],
    sizes: [50, 50],
  },
};

function SplitTerminal() {
  const paneRef = useRef(TerminalPaneHandle)(null);

  return (
    (TerminalPane
      layout={layout}
      onData={(paneId, data) =) ptys[paneId].write(data)}
      ref={paneRef}
    />
  );
}

// Write to a specific pane:
paneRef.current?.getTerminal('left')?.write('data');

// Get all pane IDs:
paneRef.current?.getPaneIds(); // ['left', 'right']

PaneLayout Type

type PaneLayout =
  | { id: string }                                                         // Leaf (single terminal)
  | { horizontal: { children: PaneLayout[]; sizes?: number[] } }
  | { vertical:   { children: PaneLayout[]; sizes?: number[] } };

sizes is an array of percentage values (must sum to 100). If omitted, children are distributed evenly.

TerminalPaneProps

Prop	Type	Description
layout	PaneLayout	Tree describing the pane structure
onData	(paneId: string, data: string) => void	Input callback per pane
theme	Theme	Shared color theme
fontSize	number	Shared font size
fontFamily	string	Shared font family
fontWeight	number	Normal font weight
fontWeightBold	number	Bold font weight
className	string	CSS class on the root element
style	CSSProperties	Inline styles on the root element