フックとコンソールREPL

フックはコンポーネントを入力、フォーカス、ビューポートに接続します。

#useInput

useInput((e) => {  if (e.key === "up") setIndex((i) => i - 1);  if (e.ctrl && e.key === "p") setPaletteOpen(true);});

⌘⌥J や ⌘R などのブラウザーのショートカットは、常にそのままブラウザーに渡されます。

usePaste と useWheel は同じオプションを受け取ります。ambient は useWheel には影響しません。

Dev Overlayのショートカット（F2 または Ctrl+`）はambientとして扱われるため、ほかにキーボード入力がないページではヒントが表示されません。

useInput((e) => {  if (e.key === "f2") toggleOverlay();}, { ambient: true });

#usePaste と useWheel

usePaste((e) => insert(e.text));useWheel((e) => scrollBy(e.rows));

#useKeyState（実験的）

@textjs/react/experimental は、押されている物理キーを KeyboardEvent.code（"KeyW"、"ArrowUp"、"ControlLeft"）で追跡する useKeyState をエクスポートします。keys.isDown(code) のポーリングや keys.pressed の読み取りは、Reactの再レンダリングを引き起こしません。キーが押されたときや離されたときに反応するには、コールバックを渡します。

import { useKeyState } from "@textjs/react/experimental";const keys = useKeyState((e) => {  if (e.code === "Space" && e.down) fire();});

ページがフォーカスを失うと、押されているキーは自動的に解放されます。実験的なエクスポートのバージョン管理については、破壊的変更を参照してください。

#useViewport

const { cols, rows, focused, paused } = useViewport();

#usePageFocus

usePageFocus() は、ページにフォーカスがあるかどうかを返します。キー入力がアプリに届くのは、ページにフォーカスがある間だけです。useViewport().focused と同じ値ですが、フォーカスが変わったときにのみ再レンダリングします。

const focused = usePageFocus();

ページにフォーカスがなく、アプリに useInput または usePaste ハンドラー、useKeyState フック、あるいはTabで移動できるフォーカス対象がある場合、コンソールフレームの最終行は「キーボードを使用するにはページをクリックしてください」と表示する琥珀色のバーになります。ambient が指定されたハンドラーは対象に含みません。このヒントはターミナル、テスト、インラインミラーでは表示されません。システムの視差効果を減らす設定が有効でない限り、ヒントは表示されるたびに約6秒間点滅します。表示のタイミングを自分で制御するには、text.config.ts または createConsoleRoot で focusHint: false を設定し、<FocusHint> をレンダリングします。

<FocusHint active={editing} />

#useConsoleStats

const { totalMs, spanCount } = useConsoleStats({ interval: 250 });

#useApp

const { exit, pause, resume } = useApp();

#window.text のREPL

すべてのアプリは window.text にヘルパーを追加します。DevToolsのプロンプトに入力してください。

text.help()text.resize(120, 36)   // pin the grid sizetext.responsive(true)  // fit the docked console againtext.pause()text.stats()text.wireframe()text.copyText()