هوک‌ها و 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+`) از نوع 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 هوک 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 ثانیه چشمک می‌زند، مگر اینکه تنظیم کاهش حرکت سیستم فعال باشد. برای اینکه خودتان زمان نمایش آن را تعیین کنید، گزینهٔ focusHint: false را در فایل text.config.ts یا در createConsoleRoot تنظیم کنید و کامپوننت <FocusHint> را رندر کنید:

<FocusHint active={editing} />

useConsoleStats

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

useApp

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

محیط REPL در window.text

هر برنامه توابع کمکی را به 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