הוקי עזר

⁦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 פריימים בשנייה, ולכן אנימציה מהירה יותר צורכת זמן מעבד על פריימים שלעולם לא נכתבים למסוף. לולאות חולקות טיימר אחד לכל קצב ונעצרות כשהפלט מושהה.

#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>;

חישוב ה-layout מתבצע אחרי שלב ה-commit של 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>