fressh/packages/react-native-xtermjs-webview

@fressh/react-native-xtermjs-webview

React Native WebView that embeds xterm.js with sensible defaults and a bridge for input and output.

Install

pnpm add @fressh/react-native-xtermjs-webview react-native-webview

Peer dependencies: react, react-dom (for web), react-native-webview.

Usage

See apps/mobile in this monorepo for a complete example. Basic usage:

import React, { useRef } from 'react';
import {
	XtermJsWebView,
	type XtermWebViewHandle,
} from '@fressh/react-native-xtermjs-webview';

export function Terminal() {
	const termRef = useRef<XtermWebViewHandle | null>(null);
	return (
		<XtermJsWebView
			ref={termRef}
			onInitialized={() =>
				termRef.current?.write(new TextEncoder().encode('hello'))
			}
			onData={(input) => console.log('user input:', input)}
		/>
	);
}

Props

• webViewOptions: subset of react-native-webview props (sane defaults applied)
• xtermOptions: partial @xterm/xterm options (theme, font, scrollback, etc.)
• onInitialized: called when the terminal is ready
• onData(str): emits user keystrokes
• size: { cols, rows } to set terminal size
• autoFit: auto-fit after important changes (default: true)

Ref API

• write(bytes), writeMany([bytes...]), flush()
• clear(), focus(), fit(), resize({ cols, rows })

Publishing contents

This package intentionally publishes both src/ and built dist/ artifacts for transparency and debugging.

Links

• Changelog: CHANGELOG.md
• Contributing: see the monorepo guide at ../../CONTRIBUTING.md
• Example: apps/mobile
• License: MIT