훅과 콘솔 REPL

훅은 컴포넌트를 입력, 포커스, 뷰포트에 연결해요.

#useInput

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

⌘⌥J와 ⌘R 같은 브라우저 단축키는 항상 그대로 전달돼요.

usePaste와 useWheel은 같은 옵션을 받아요. ambient는 useWheel에 영향을 주지 않아요.

Dev Overlay의 단축키(F2 또는 Ctrl+`)는 ambient이므로, 다른 키보드 입력이 없는 페이지에는 안내가 표시되지 않아요.

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

#usePaste와 useWheel

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

#useKeyState (실험적 기능)

@textjs/react/experimental은 KeyboardEvent.code("KeyW", "ArrowUp", "ControlLeft")로 누르고 있는 물리 키를 추적하는 useKeyState를 내보내요. keys.isDown(code)를 폴링하거나 keys.pressed를 읽어도 React 재렌더링이 발생하지 않아요. 키를 누르거나 놓는 순간에 반응하려면 콜백을 전달하세요.

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

페이지가 포커스를 잃으면 누르고 있던 키가 자동으로 해제돼요. 실험적 내보내기의 버전 관리 방식은 호환성을 깨는 변경 사항을 참고하세요.

#useViewport

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

#usePageFocus

usePageFocus()는 페이지에 포커스가 있는지를 반환해요. 페이지에 포커스가 있을 때만 키 입력이 앱에 전달돼요. useViewport().focused와 같은 값이지만, 포커스가 바뀔 때만 재렌더링해요.

const focused = usePageFocus();

페이지에 포커스가 없고 앱에 useInput 또는 usePaste 핸들러, useKeyState 훅, Tab으로 이동할 수 있는 포커스 대상 중 하나가 있으면, 콘솔 프레임의 마지막 줄이 “키보드를 사용하려면 페이지를 클릭하세요”라고 적힌 황색 막대로 바뀌어요. ambient로 표시한 핸들러는 제외해요. 터미널, 테스트, 인라인 미러에는 안내가 나타나지 않아요. 시스템의 동작 줄이기 설정이 켜져 있지 않으면, 안내가 나타날 때마다 약 6초 동안 깜박여요. 표시 시점을 직접 정하려면 text.config.ts 또는 createConsoleRoot에 focusHint: false를 설정하고 <FocusHint>를 렌더링하세요:

<FocusHint active={editing} />

#useConsoleStats

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

#useApp

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

#window.text REPL

모든 앱은 window.text에 헬퍼를 추가해요. 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()