Hooks et REPL de la console
useInput, useFocus, useViewport, useConsoleStats et window.text.
Les hooks relient les composants aux entrées, au focus et à la zone d’affichage.
useInput
useInput((e) => { if (e.key === "up") setIndex((i) => i - 1); if (e.ctrl && e.key === "p") setPaletteOpen(true);});| Champ | Description |
|---|---|
key | "up" "return" "escape" "tab"… |
input | Texte produit par la touche |
ctrl meta shift alt | Modificateurs |
stopPropagation() | Arrêter les gestionnaires de priorité inférieure |
Les raccourcis du navigateur comme ⌘⌥J et ⌘R restent toujours actifs.
usePaste et useWheel acceptent les mêmes options. ambient n’a aucun effet sur useWheel.
| Option | Description |
|---|---|
isActive | false désactive le gestionnaire sans le démonter (par défaut true) |
priority | Les priorités les plus élevées s’exécutent en premier (par défaut 0). Les composants ayant le focus utilisent FOCUSED_INPUT_PRIORITY (10) |
global | Continuer à recevoir les entrées lorsqu’un <Modal> extérieur à ce composant est ouvert (par défaut false) |
ambient | Ne pas prendre en compte ce gestionnaire pour l’indication de focus (par défaut false) |
Le raccourci du Dev Overlay (F2 ou Ctrl+`) est ambiant, donc une page sans autre entrée clavier n’affiche pas l’indication.
useInput((e) => { if (e.key === "f2") toggleOverlay();}, { ambient: true });usePaste et useWheel
usePaste((e) => insert(e.text));useWheel((e) => scrollBy(e.rows));useKeyState (expérimental)
@textjs/react/experimental exporte useKeyState pour suivre les touches physiques maintenues enfoncées via KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft"). Interroger keys.isDown(code) ou lire keys.pressed ne déclenche pas de nouveaux rendus React. Passez une fonction de rappel pour réagir aux appuis et aux relâchements des touches au moment où ils se produisent.
import { useKeyState } from "@textjs/react/experimental";const keys = useKeyState((e) => { if (e.code === "Space" && e.down) fire();});Les touches maintenues enfoncées sont automatiquement relâchées lorsque la page perd le focus. Consultez Changements incompatibles pour connaître les règles de versionnement des exports expérimentaux.
useViewport
const { cols, rows, focused, paused } = useViewport();usePageFocus
usePageFocus() indique si la page a le focus. Les frappes clavier n’atteignent l’application que lorsque c’est le cas. Cette valeur est identique à useViewport().focused, mais le hook ne déclenche un nouveau rendu que lorsque le focus change.
const focused = usePageFocus();Lorsque la page n’a pas le focus et que l’application possède un gestionnaire useInput ou usePaste, un hook useKeyState ou une cible de focus accessible avec Tab, la dernière ligne de la frame de console devient une barre ambrée indiquant « Cliquez sur la page pour utiliser le clavier ». Les gestionnaires marqués ambient ne sont pas pris en compte. L’indication n’apparaît ni dans un terminal, ni dans les tests, ni dans les miroirs intégrés. Chaque fois que l’indication apparaît, elle clignote pendant environ 6 secondes, sauf si le paramètre système de réduction des animations est activé. Pour décider vous-même quand elle s’affiche, définissez focusHint: false dans text.config.ts ou createConsoleRoot et affichez <FocusHint> :
<FocusHint active={editing} />useConsoleStats
const { totalMs, spanCount } = useConsoleStats({ interval: 250 });useApp
const { exit, pause, resume } = useApp();Le REPL window.text
Chaque application ajoute des fonctions utilitaires à window.text. Saisissez-les dans l’invite de 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()