Хуки и 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.

ПараметрОписание
isActivefalse отключает обработчик без размонтирования (по умолчанию 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()
Изменить эту страницу на GitHub