Hooki i REPL konsoli

Hooki łączą komponenty z obsługą wejścia, fokusem i obszarem widocznym.

#useInput

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

Skróty klawiszowe przeglądarki, takie jak ⌘⌥J i ⌘R, zawsze są przepuszczane.

usePaste i useWheel przyjmują te same opcje. ambient nie wpływa na useWheel.

Skrót klawiszowy Dev Overlay (F2 lub Ctrl+`) ma ustawienie ambient, więc strona bez innej obsługi klawiatury nie wyświetla wskazówki.

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

#usePaste i useWheel

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

#useKeyState (eksperymentalny)

@textjs/react/experimental eksportuje useKeyState, który śledzi przytrzymane fizyczne klawisze według KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft"). Odpytywanie keys.isDown(code) lub odczytywanie keys.pressed nie wywołuje ponownego renderowania w React. Przekaż funkcję zwrotną, aby reagować na naciśnięcia i zwolnienia klawiszy w momencie ich wystąpienia.

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

Przytrzymane klawisze są automatycznie zwalniane, gdy strona traci fokus. Zobacz Zmiany niezgodne wstecznie, aby dowiedzieć się, jak wersjonowane są eksperymentalne eksporty.

#useViewport

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

#usePageFocus

usePageFocus() zwraca informację, czy strona ma fokus. Naciśnięcia klawiszy docierają do aplikacji tylko wtedy, gdy go ma. To ta sama wartość co useViewport().focused, ale ponowne renderowanie następuje tylko przy zmianie fokusu.

const focused = usePageFocus();

Gdy strona nie ma fokusu, a aplikacja ma handler useInput lub usePaste, hook useKeyState lub element, do którego można przenieść fokus klawiszem Tab, ostatni wiersz klatki konsoli staje się bursztynowym paskiem z tekstem „Kliknij stronę, aby używać klawiatury”. Handlery oznaczone jako ambient nie są uwzględniane. Wskazówka nie pojawia się w terminalu, w testach ani w kopiach widoku osadzonych na stronie. Za każdym razem, gdy wskazówka się pojawia, miga przez około 6 sekund, chyba że włączono systemowe ustawienie ograniczenia ruchu. Aby samodzielnie decydować, kiedy się pojawia, ustaw focusHint: false w text.config.ts lub createConsoleRoot i wyrenderuj <FocusHint>:

<FocusHint active={editing} />

#useConsoleStats

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

#useApp

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

#REPL window.text

Każda aplikacja dodaje funkcje pomocnicze do window.text. Wpisz je w wierszu poleceń 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()