Hook và REPL console
useInput, useFocus, useViewport, useConsoleStats và window.text.
Hook kết nối component với đầu vào, trạng thái tiêu điểm và vùng nhìn.
useInput
useInput((e) => { if (e.key === "up") setIndex((i) => i - 1); if (e.ctrl && e.key === "p") setPaletteOpen(true);});| Trường | Mô tả |
|---|---|
key | "up" "return" "escape" "tab"… |
input | Văn bản do phím tạo ra |
ctrl meta shift alt | Phím bổ trợ |
stopPropagation() | Dừng các handler có độ ưu tiên thấp hơn |
Phím tắt của trình duyệt như ⌘⌥J và ⌘R luôn đi qua mà không bị chặn.
usePaste và useWheel nhận cùng các tùy chọn. ambient không có tác dụng với useWheel.
| Tùy chọn | Mô tả |
|---|---|
isActive | false tắt handler mà không gỡ component (mặc định true) |
priority | Độ ưu tiên cao hơn chạy trước (mặc định 0). Component có tiêu điểm dùng FOCUSED_INPUT_PRIORITY (10) |
global | Tiếp tục nhận đầu vào khi một <Modal> bên ngoài component này đang mở (mặc định false) |
ambient | Không tính handler này khi xác định có hiển thị gợi ý tiêu điểm hay không (mặc định false) |
Phím tắt của Dev Overlay (F2 hoặc Ctrl+`) có tính chất ambient, nên trang không có đầu vào bàn phím nào khác sẽ không hiển thị gợi ý.
useInput((e) => { if (e.key === "f2") toggleOverlay();}, { ambient: true });usePaste và useWheel
usePaste((e) => insert(e.text));useWheel((e) => scrollBy(e.rows));useKeyState (thử nghiệm)
@textjs/react/experimental xuất useKeyState để theo dõi phím vật lý đang giữ theo KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft"). Thăm dò keys.isDown(code) hoặc đọc keys.pressed không kích hoạt React render lại. Truyền một callback để phản hồi ngay khi nhấn và thả phím.
import { useKeyState } from "@textjs/react/experimental";const keys = useKeyState((e) => { if (e.code === "Space" && e.down) fire();});Các phím đang giữ tự động chuyển sang trạng thái thả khi trang mất tiêu điểm. Xem Thay đổi phá vỡ tương thích để biết cách đánh phiên bản cho các export thử nghiệm.
useViewport
const { cols, rows, focused, paused } = useViewport();usePageFocus
usePageFocus() trả về trạng thái trang có tiêu điểm hay không. Thao tác gõ phím chỉ đến ứng dụng khi trang có tiêu điểm. Giá trị này giống useViewport().focused, nhưng chỉ kích hoạt render lại khi tiêu điểm thay đổi.
const focused = usePageFocus();Khi trang không có tiêu điểm và ứng dụng có handler useInput hoặc usePaste, hook useKeyState hoặc một đích tiêu điểm mà Tab có thể đến, dòng cuối của frame console trở thành thanh màu hổ phách với nội dung “Nhấp vào trang để dùng bàn phím”. Không tính các handler có đánh dấu ambient. Gợi ý không xuất hiện trong terminal, trong kiểm thử hoặc trong các bản phản chiếu nội tuyến. Mỗi lần xuất hiện, gợi ý nhấp nháy trong khoảng 6 giây, trừ khi hệ thống đang bật cài đặt giảm chuyển động. Để tự quyết định khi nào hiển thị gợi ý, đặt focusHint: false trong text.config.ts hoặc createConsoleRoot và render <FocusHint>:
<FocusHint active={editing} />useConsoleStats
const { totalMs, spanCount } = useConsoleStats({ interval: 250 });useApp
const { exit, pause, resume } = useApp();REPL window.text
Mỗi ứng dụng thêm hàm trợ giúp vào window.text. Gõ chúng vào prompt của 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()