यूटिलिटी हुक

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>