Hooks y REPL de la consola

Los hooks conectan los componentes con la entrada, el foco y el área visible.

#useInput

useInput((e) => {  if (e.key === "up") setIndex((i) => i - 1);  if (e.ctrl && e.key === "p") setPaletteOpen(true);});

Los atajos del navegador como ⌘⌥J y ⌘R siempre se dejan pasar.

usePaste y useWheel aceptan las mismas opciones. ambient no tiene efecto en useWheel.

El atajo de Dev Overlay (F2 o Ctrl+`) es ambiental, por lo que una página sin otra entrada de teclado no muestra el aviso.

useInput((e) => {  if (e.key === "f2") toggleOverlay();}, { ambient: true });

#usePaste y useWheel

usePaste((e) => insert(e.text));useWheel((e) => scrollBy(e.rows));

#useKeyState (experimental)

@textjs/react/experimental exporta useKeyState para rastrear las teclas físicas que se mantienen pulsadas mediante KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft"). Consultar keys.isDown(code) o leer keys.pressed no provoca nuevos renderizados de React. Pasa un callback para reaccionar a las pulsaciones y liberaciones de teclas en el momento en que ocurren.

import { useKeyState } from "@textjs/react/experimental";const keys = useKeyState((e) => {  if (e.code === "Space" && e.down) fire();});

Las teclas que se mantienen pulsadas se liberan automáticamente cuando la página pierde el foco. Consulta Cambios incompatibles para saber cómo se versionan las exportaciones experimentales.

#useViewport

const { cols, rows, focused, paused } = useViewport();

#usePageFocus

usePageFocus() devuelve si la página tiene el foco. Las pulsaciones de teclas llegan a la app solo mientras lo tiene. Es el mismo valor que useViewport().focused, pero solo vuelve a renderizar cuando cambia el foco.

const focused = usePageFocus();

Mientras la página no tiene el foco y la app tiene un controlador useInput o usePaste, un hook useKeyState o un destino de foco al que se puede llegar con Tab, la última fila del fotograma de la consola se convierte en una barra ámbar que dice «Haz clic en la página para usar el teclado». Los controladores marcados como ambient no cuentan. El aviso no aparece en una terminal, en las pruebas ni en las réplicas integradas. Cada vez que aparece el aviso, parpadea durante unos 6 segundos, a menos que esté activada la opción de movimiento reducido del sistema. Para decidir cuándo se muestra, establece focusHint: false en text.config.ts o createConsoleRoot y renderiza <FocusHint>:

<FocusHint active={editing} />

#useConsoleStats

const { totalMs, spanCount } = useConsoleStats({ interval: 250 });

#useApp

const { exit, pause, resume } = useApp();

#El REPL de window.text

Cada app añade funciones auxiliares a window.text. Escríbelas en la línea de entrada 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()