हुक और कंसोल REPL
useInput, useFocus, useViewport, useConsoleStats और window.text।
हुक कंपोनेंट को इनपुट, फ़ोकस और व्यूपोर्ट से जोड़ते हैं।
useInput
useInput((e) => { if (e.key === "up") setIndex((i) => i - 1); if (e.ctrl && e.key === "p") setPaletteOpen(true);});| फ़ील्ड | विवरण |
|---|---|
key | "up" "return" "escape" "tab"… |
input | कुंजी से बना टेक्स्ट |
ctrl meta shift alt | मॉडिफ़ायर |
stopPropagation() | कम प्राथमिकता वाले हैंडलर रोकें |
⌘⌥J और ⌘R जैसे ब्राउज़र शॉर्टकट हमेशा आगे जाने दिए जाते हैं।
usePaste और useWheel वही विकल्प लेते हैं। ambient का useWheel हुक पर कोई असर नहीं होता।
| विकल्प | विवरण |
|---|---|
isActive | false हैंडलर को अनमाउंट किए बिना बंद करता है (डिफ़ॉल्ट true) |
priority | ज़्यादा प्राथमिकता वाले हैंडलर पहले चलते हैं (डिफ़ॉल्ट 0)। फ़ोकस वाले कंपोनेंट FOCUSED_INPUT_PRIORITY (10) इस्तेमाल करते हैं |
global | इस कंपोनेंट के बाहर कोई <Modal> खुला होने पर भी इनपुट लेते रहें (डिफ़ॉल्ट false) |
ambient | इस हैंडलर को फ़ोकस संकेत के लिए न गिनें (डिफ़ॉल्ट false) |
Dev Overlay का शॉर्टकट (F2 या Ctrl+`) ऐम्बिएंट है, इसलिए जिस पेज पर कोई और कीबोर्ड इनपुट नहीं है, वहां संकेत नहीं दिखता।
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 पैकेज useKeyState एक्सपोर्ट करता है, जो KeyboardEvent.code ("KeyW", "ArrowUp", "ControlLeft") से दबाकर रखी गई फ़िज़िकल कुंजियों को ट्रैक करता है। 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()