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-native-webview.

Usage

For a complete production example, see the mobile app: https://github.com/EthanShoeDev/fressh/tree/main/apps/mobile

Basic usage:

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

export function Terminal() {
	const termRef = useRef<XtermWebViewHandle | null>(null);

	return (
		<XtermJsWebView
			ref={termRef}
			onInitialized={() => {
				const hello = new TextEncoder().encode('hello');
				termRef.current?.write(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: CONTRIBUTING.md
• Example app: apps/mobile and source usage: apps/mobile/src/app/(tabs)/shell/detail.tsx
• API source: src/index.tsx
• License: MIT