Хуки и REPL консоли
useInput, useFocus, useViewport, useConsoleStats и window.text.
Хуки связывают компоненты с вводом, фокусом и областью просмотра.
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.
| Параметр | Описание |
|---|---|
isActive | false отключает обработчик без размонтирования (по умолчанию true) |
priority | Обработчики с более высоким приоритетом выполняются первыми (по умолчанию 0). Компоненты в фокусе используют FOCUSED_INPUT_PRIORITY (10) |
global | Продолжать получать ввод, пока открыт <Modal> вне этого компонента (по умолчанию false) |
ambient | Не учитывать этот обработчик для подсказки о фокусе (по умолчанию false) |
Сочетание клавиш 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 экспортирует 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 или элемент, на который можно перевести фокус клавишей Tab, последняя строка кадра консоли становится янтарной полосой с текстом «Щёлкните по странице, чтобы использовать клавиатуру». Обработчики с пометкой ambient не учитываются. Подсказка не появляется в терминале, в тестах и во встроенных зеркалах. При каждом появлении подсказка мигает около 6 секунд, если в системе не включено уменьшение движения. Чтобы самостоятельно определять, когда она отображается, задайте focusHint: false в text.config.ts или createConsoleRoot и отрендерите <FocusHint>:
<FocusHint active={editing} />useConsoleStats
const { totalMs, spanCount } = useConsoleStats({ interval: 250 });useApp
const { exit, pause, resume } = useApp();REPL window.text
Каждое приложение добавляет вспомогательные функции в 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()