ターミナル出力の表示

useTerminal を使って読み取り専用の xterm ターミナルを作成し、ANSI カラー対応でシェルコマンド出力をレンダリングします。

基本的な使い方

import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";
 
function Terminal() {
  const { terminalRef, instance } = useTerminal({
    fontSize: 14,
    theme: TerminalThemes.dracula
  });
 
  useShell("my-command", { terminal: instance });
 
  return <div ref={terminalRef} style={{ height: 400, width: "100%" }} />;
}

カスタマイズ

フォント

const { terminalRef, instance } = useTerminal({
  fontSize: 16,
  fontFamily: "'JetBrains Mono', monospace"
});

テーマ

20 以上の組み込みテーマから選べます。

// ダークテーマ
TerminalThemes.dark.default;
TerminalThemes.dark.modern;
TerminalThemes.nord;
TerminalThemes.dracula;
TerminalThemes.tokyoNight;
TerminalThemes.oneDark;
 
// ライトテーマ
TerminalThemes.light.default;
TerminalThemes.solarized.light;
TerminalThemes.catppuccin.latte;

レイアウト

ターミナルは FitAddon を使ってコンテナに自動フィットします。親要素でサイズを制御します。

<div ref={terminalRef} className="h-full w-full" />

注意事項

ターミナルは読み取り専用です（ユーザー入力は受け付けません）。
カーソルは非表示です。
スクロールバックは無効です。
CSS オーバーライドによりコンテナを埋めます。

詳細は useTerminal リファレンスを参照してください。