Hooks und die Konsolen-REPL
useInput, useFocus, useViewport, useConsoleStats und window.text.
Hooks verbinden Komponenten mit Eingaben, Fokus und dem Viewport.
useInput
useInput((e) => { if (e.key === "up") setIndex((i) => i - 1); if (e.ctrl && e.key === "p") setPaletteOpen(true);});| Feld | Beschreibung |
|---|---|
key | "up" "return" "escape" "tab"… |
input | Von der Taste erzeugter Text |
ctrl meta shift alt | Modifikatortasten |
stopPropagation() | Handler mit niedrigerer Priorität stoppen |
Browser-Tastenkürzel wie ⌘⌥J und ⌘R werden immer durchgereicht.
usePaste und useWheel akzeptieren dieselben Optionen. ambient hat keine Wirkung auf useWheel.
| Option | Beschreibung |
|---|---|
isActive | false deaktiviert den Handler, ohne die Komponente auszuhängen (Standard: true) |
priority | Höhere Prioritäten kommen zuerst (Standard: 0). Fokussierte Komponenten verwenden FOCUSED_INPUT_PRIORITY (10) |
global | Weiter Eingaben empfangen, während ein <Modal> außerhalb dieser Komponente geöffnet ist (Standard: false) |
ambient | Diesen Handler beim Fokushinweis nicht mitzählen (Standard: false) |
Das Tastenkürzel des Dev-Overlays (F2 oder Ctrl+`) ist als ambient markiert, daher zeigt eine Seite ohne weitere Tastatureingaben den Hinweis nicht an.
useInput((e) => { if (e.key === "f2") toggleOverlay();}, { ambient: true });usePaste und useWheel
usePaste((e) => insert(e.text));useWheel((e) => scrollBy(e.rows));useKeyState (experimentell)
@textjs/react/experimental exportiert useKeyState, um gedrückt gehaltene physische Tasten anhand von KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft") zu verfolgen. Das Abfragen von keys.isDown(code) oder Lesen von keys.pressed löst kein erneutes React-Rendering aus. Übergib einen Callback, um direkt auf das Drücken und Loslassen von Tasten zu reagieren.
import { useKeyState } from "@textjs/react/experimental";const keys = useKeyState((e) => { if (e.code === "Space" && e.down) fire();});Gedrückt gehaltene Tasten werden automatisch freigegeben, wenn die Seite den Fokus verliert. Unter Inkompatible Änderungen erfährst du, wie experimentelle Exporte versioniert werden.
useViewport
const { cols, rows, focused, paused } = useViewport();usePageFocus
usePageFocus() gibt zurück, ob die Seite den Fokus hat. Tastatureingaben erreichen die App nur, solange das der Fall ist. Der Wert ist derselbe wie bei useViewport().focused, aber ein erneutes Rendering erfolgt nur bei Fokusänderungen.
const focused = usePageFocus();Solange die Seite keinen Fokus hat und die App einen useInput- oder usePaste-Handler, einen useKeyState-Hook oder ein mit Tab erreichbares Fokusziel hat, erscheint in der letzten Zeile des Konsolen-Frames ein bernsteinfarbener Balken mit dem Text „Klicke auf die Seite, um die Tastatur zu verwenden“. Mit ambient markierte Handler zählen nicht mit. Der Hinweis erscheint weder in einem Terminal noch in Tests oder Inline-Spiegelungen. Bei jedem Erscheinen blinkt der Hinweis etwa 6 Sekunden lang, sofern die Systemeinstellung für reduzierte Bewegung nicht aktiviert ist. Um selbst festzulegen, wann er erscheint, setze focusHint: false in text.config.ts oder createConsoleRoot und rendere <FocusHint>:
<FocusHint active={editing} />useConsoleStats
const { totalMs, spanCount } = useConsoleStats({ interval: 250 });useApp
const { exit, pause, resume } = useApp();Die window.text-REPL
Jede App fügt Hilfsfunktionen zu window.text hinzu. Gib sie in der DevTools-Eingabezeile ein.
text.help()text.resize(120, 36) // pin the grid sizetext.responsive(true) // fit the docked console againtext.pause()text.stats()text.wireframe()text.copyText()