Hooks and the Console REPL
useInput, useFocus, useViewport, useConsoleStats and window.text.
Hooks connect components to input, focus and the viewport.
useInput
useInput((e) => { if (e.key === "up") setIndex((i) => i - 1); if (e.ctrl && e.key === "p") setPaletteOpen(true);});| Field | Description |
|---|---|
key | "up" "return" "escape" "tab"… |
input | Text produced by the key |
ctrl meta shift alt | Modifiers |
stopPropagation() | Stop lower-priority handlers |
Browser shortcuts like ⌘⌥J and ⌘R always pass through.
usePaste and useWheel
usePaste((e) => insert(e.text));useWheel((e) => scrollBy(e.rows));useViewport
const { cols, rows, focused, paused } = useViewport();useConsoleStats
const { totalMs, spanCount } = useConsoleStats({ interval: 250 });useApp
const { exit, pause, resume } = useApp();The window.text REPL
Every app adds helpers to window.text. Type them in the DevTools prompt.
text.help()text.resize(120, 36) // pin the grid sizetext.responsive(true) // fit the docked console againtext.pause()text.stats()text.wireframe()text.copyText()