Hooks e REPL do console

Hooks conectam componentes à entrada, ao foco e à área de visualização.

#useInput

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

Atalhos do navegador como ⌘⌥J e ⌘R sempre passam sem interceptação.

usePaste e useWheel aceitam as mesmas opções. ambient não tem efeito sobre useWheel.

O atalho do Dev Overlay (F2 ou Ctrl+`) é ambiente, então uma página sem outra entrada de teclado não mostra a dica.

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

#usePaste e useWheel

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

#useKeyState (experimental)

@textjs/react/experimental exporta useKeyState para rastrear teclas físicas mantidas pressionadas por KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft"). Consultar keys.isDown(code) periodicamente ou ler keys.pressed não dispara novas renderizações do React. Passe um callback para reagir ao pressionar e soltar teclas no momento em que isso acontece.

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

Teclas mantidas pressionadas são liberadas automaticamente quando a página perde o foco. Consulte Mudanças incompatíveis para saber como as exportações experimentais são versionadas.

#useViewport

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

#usePageFocus

usePageFocus() retorna se a página está com foco. As teclas pressionadas só chegam ao app enquanto ela está com foco. É o mesmo valor de useViewport().focused, mas só provoca uma nova renderização quando o foco muda.

const focused = usePageFocus();

Enquanto a página estiver sem foco e o app tiver um manipulador useInput ou usePaste, um hook useKeyState ou um alvo de foco acessível por Tab, a última linha do quadro do console se torna uma barra âmbar com o texto “Clique na página para usar o teclado”. Manipuladores marcados como ambient não contam. A dica não aparece em terminais, em testes nem em espelhos inline. Sempre que a dica aparece, ela pisca por cerca de 6 segundos, a menos que a configuração de movimento reduzido do sistema esteja ativada. Para decidir quando ela aparece, defina focusHint: false em text.config.ts ou createConsoleRoot e renderize <FocusHint>:

<FocusHint active={editing} />

#useConsoleStats

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

#useApp

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

#O REPL de window.text

Todo app adiciona funções auxiliares a window.text. Digite-as no prompt do 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()