हुक और कंसोल 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 हुक पर कोई असर नहीं होता।

विकल्पविवरण
isActivefalse हैंडलर को अनमाउंट किए बिना बंद करता है (डिफ़ॉल्ट 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()
GitHub पर यह पेज एडिट करें