Hook 與主控台 REPL

useInput、useFocus、useViewport、useConsoleStats 與 window.text。

Hook 將元件連接到輸入、焦點與檢視區。

useInput

useInput((e) => {  if (e.key === "up") setIndex((i) => i - 1);  if (e.ctrl && e.key === "p") setPaletteOpen(true);});
欄位說明
key"up" "return" "escape" "tab"…
input按鍵產生的文字
ctrl meta shift alt修飾鍵
stopPropagation()停止執行較低優先順序的處理函式

⌘⌥J 和 ⌘R 等瀏覽器快速鍵一律不會被攔截。

usePaste 和 useWheel 接受相同的選項。ambient 對 useWheel 沒有效果。

選項說明
isActivefalse 會停用處理函式,但不卸載元件(預設為 true)
priority優先順序較高者先執行(預設為 0)。取得焦點的元件使用 FOCUSED_INPUT_PRIORITY(10)
global此元件外的 <Modal> 開啟時,繼續接收輸入(預設為 false)
ambient不將此處理函式計入焦點提示的判斷(預設為 false)

開發覆蓋層的快速鍵(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 匯出 useKeyState,透過 KeyboardEvent.code("KeyW"、"ArrowUp"、"ControlLeft")追蹤按住的實體按鍵。輪詢 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 Hook,或可透過 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()
在 GitHub 編輯此頁