هوک‌های کمکی

⁦Text.js⁩ شامل هوک‌هایی برای زمان‌سنج‌ها، انیمیشن، اندازه‌گیری و ذخیره‌سازی پایدار است. زمان‌سنج‌ها و انیمیشن‌ها از زمان‌بندی فریم‌های رندرکننده پیروی می‌کنند.

#زمان‌سنج‌ها

useInterval(refresh, live ? 1000 : null);useTimeout(() => setHint(false), 3000);

هر دو همیشه آخرین تابع بازخوان را فراخوانی می‌کنند. مقدار null آن‌ها را متوقف می‌کند.

#useAnimationFrame

useAnimationFrame((delta, elapsed) => setPhase(elapsed / 1000), { isActive: playing });

هوک useAnimationFrame در هر بازهٔ فریم یک بار اجرا می‌شود. Text.js حدود 15 فریم در ثانیه تولید می‌کند، بنابراین اجرای سریع‌تر انیمیشن، CPU را صرف فریم‌هایی می‌کند که هرگز در کنسول ثبت نمی‌شوند. حلقه‌ها برای هر نرخ از یک زمان‌سنج مشترک استفاده می‌کنند و هنگام توقف موقت خروجی متوقف می‌شوند.

#useTween و useSpring

const width = useTween(open ? 32 : 0, { duration: 240, easing: "easeOutCubic" });const offset = useSpring(selected * 2);

هر دو عددی برمی‌گردانند که به‌صورت متحرک به مقدار هدف نزدیک می‌شود و پس از رسیدن به حالت پایدار، اجرای دوره‌ای آن‌ها متوقف می‌شود. مجموعهٔ easings شامل linear، easeOutCubic، easeInOutCubic، easeOutExpo و موارد دیگر است.

#useMeasure

const [ref, { width, height }] = useMeasure();return <Box ref={ref} className="grow">{width > 80 ? <Wide /> : <Narrow />}</Box>;

چیدمان پس از ثبت تغییرات React اجرا می‌شود، بنابراین اندازه‌ها یک فریم دیرتر در دسترس قرار می‌گیرند. رندر مجدد فقط هنگام تغییر اندازه انجام می‌شود.

#useBreakpoint

const { breakpoint, up } = useBreakpoint();return up("md") ? <TwoColumns /> : <OneColumn />;

نقاط شکست بر حسب تعداد ستون هستند. آستانه‌های دلخواه خود را به‌عنوان آرگومان ارسال کنید.

#useLocalStorage

const [theme, setTheme] = useLocalStorage("theme", "geistDark");

هوک useLocalStorage داده‌های JSON را در localStorage و خارج از مرورگر در حافظه ذخیره می‌کند. هوک‌هایی که کلید مشترک دارند، حتی در برگه‌های مختلف، همگام می‌مانند.

#useClipboard

const { copy, copied } = useClipboard();useKeymap({ y: { label: "Copy id", run: () => copy(deployment.id) } });return <Text color="muted">{copied ? "Copied" : deployment.id}</Text>;

#<FocusScope>

کامپوننت <FocusScope> یک مرز نامرئی برای تمرکز است. با گزینهٔ trap، کلید Tab و هوک useInput درون آن می‌مانند، درست مانند یک <Modal> بدون لایهٔ پوشاننده.

<FocusScope trap={editing}>  <Input autoFocus /></FocusScope>