mirror of
https://github.com/EthanShoeDev/fressh.git
synced 2026-01-11 06:12:51 +00:00
68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
## @fressh/react-native-xtermjs-webview
|
|
|
|
React Native WebView that embeds [xterm.js](https://xtermjs.org/) with sensible
|
|
defaults and a bridge for input and output.
|
|
|
|
[](https://www.npmjs.com/package/@fressh/react-native-xtermjs-webview)
|
|
|
|
### Install
|
|
|
|
```bash
|
|
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:
|
|
|
|
```tsx
|
|
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`](./CHANGELOG.md)
|
|
- Contributing: see the monorepo guide at
|
|
[`../../CONTRIBUTING.md`](../../CONTRIBUTING.md)
|
|
- Example: `apps/mobile`
|
|
- License: MIT
|