Hook e REPL della console
useInput, useFocus, useViewport, useConsoleStats e window.text.
Gli hook collegano i componenti all’input, al focus e al viewport.
useInput
useInput((e) => { if (e.key === "up") setIndex((i) => i - 1); if (e.ctrl && e.key === "p") setPaletteOpen(true);});| Campo | Descrizione |
|---|---|
key | "up" "return" "escape" "tab"… |
input | Testo prodotto dal tasto |
ctrl meta shift alt | Modificatori |
stopPropagation() | Interrompere gli handler con priorità inferiore |
Le scorciatoie del browser come ⌘⌥J e ⌘R passano sempre.
usePaste e useWheel accettano le stesse opzioni. ambient non ha effetto su useWheel.
| Opzione | Descrizione |
|---|---|
isActive | false disattiva l’handler senza smontare il componente (valore predefinito true) |
priority | Le priorità più alte vengono eseguite per prime (valore predefinito 0). I componenti con il focus usano FOCUSED_INPUT_PRIORITY (10) |
global | Continuare a ricevere input mentre è aperto un <Modal> esterno a questo componente (valore predefinito false) |
ambient | Escludere questo handler dal conteggio per il suggerimento sul focus (valore predefinito false) |
La scorciatoia del Dev Overlay (F2 o Ctrl+`) è ambient, quindi una pagina senza altri input da tastiera non mostra il suggerimento.
useInput((e) => { if (e.key === "f2") toggleOverlay();}, { ambient: true });usePaste e useWheel
usePaste((e) => insert(e.text));useWheel((e) => scrollBy(e.rows));useKeyState (sperimentale)
@textjs/react/experimental esporta useKeyState per tenere traccia dei tasti fisici tenuti premuti tramite KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft"). Interrogare keys.isDown(code) o leggere keys.pressed non attiva nuovi rendering di React. Passa una callback per reagire alla pressione e al rilascio dei tasti nel momento in cui avvengono.
import { useKeyState } from "@textjs/react/experimental";const keys = useKeyState((e) => { if (e.code === "Space" && e.down) fire();});I tasti tenuti premuti vengono rilasciati automaticamente quando la pagina perde il focus. Consulta Modifiche incompatibili per sapere come vengono assegnate le versioni alle esportazioni sperimentali.
useViewport
const { cols, rows, focused, paused } = useViewport();usePageFocus
usePageFocus() restituisce un valore che indica se la pagina ha il focus. Le pressioni dei tasti raggiungono l’app solo quando la pagina ha il focus. È lo stesso valore di useViewport().focused, ma attiva un nuovo rendering solo quando il focus cambia.
const focused = usePageFocus();Quando la pagina non ha il focus e l’app ha un handler useInput o usePaste, un hook useKeyState o un elemento che può ricevere il focus tramite Tab, l’ultima riga del frame della console diventa una barra color ambra con il testo «Fai clic sulla pagina per usare la tastiera». Gli handler contrassegnati come ambient non contano. Il suggerimento non appare in un terminale, nei test o nelle repliche inline. Ogni volta che appare, il suggerimento lampeggia per circa 6 secondi, a meno che non sia attiva l’impostazione di sistema per ridurre il movimento. Per decidere tu quando mostrarlo, imposta focusHint: false in text.config.ts o in createConsoleRoot e renderizza <FocusHint>:
<FocusHint active={editing} />useConsoleStats
const { totalMs, spanCount } = useConsoleStats({ interval: 250 });useApp
const { exit, pause, resume } = useApp();Il REPL di window.text
Ogni app aggiunge funzioni di utilità a window.text. Digitale nel prompt di 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()