useTerminal

読み取り専用の xterm ターミナルインスタンスを作成し、コンテナ要素にアタッチします。

インポート

import { useTerminal } from "@fluxlay/react";

シグネチャ

function useTerminal(options?: UseTerminalOptions): UseTerminalReturn;

パラメータ

UseTerminalOptions

プロパティ	型	デフォルト	説明
`fontSize`	`number`	`12`	フォントサイズ（ピクセル）。
`fontFamily`	`string`	システムモノスペース	フォントファミリー文字列。
`theme`	`ITheme`	`TerminalThemes.dark.default`	xterm カラーテーマ。

戻り値

プロパティ	型	説明
`terminalRef`	`React.RefObject<HTMLDivElement>`	コンテナ `<div>` にアタッチする ref。
`instance`	`TerminalInstance \| null`	マウント後に利用可能なターミナルインスタンス。

TerminalInstance

プロパティ	型	説明
`terminal`	`Terminal`	xterm の `Terminal` インスタンス。
`fitAddon`	`FitAddon`	自動リサイズ用の FitAddon。

使用例

import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";
 
function Monitor() {
  const { terminalRef, instance } = useTerminal({
    fontSize: 14,
    fontFamily: "'JetBrains Mono', monospace",
    theme: TerminalThemes.catppuccin.mocha
  });
 
  useShell("my-command", { terminal: instance });
 
  return <div ref={terminalRef} style={{ height: "100%", width: "100%" }} />;
}

動作

ターミナルは読み取り専用です（キーボード入力は無効）。
カーソルは非表示です。
スクロールバックは無効です。
FitAddon を使ってターミナルがコンテナに自動フィットします。
CSS オーバーライドによりターミナルがコンテナ要素を埋めます。