یوٹیلٹی ہکس

⁦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>