خطافات مساعدة

يتضمن 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>;

يُنفّذ التخطيط بعد أن تعتمد 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>