Yardımcı hook’lar

Text.js, zamanlayıcılar, animasyon, ölçüm ve kalıcı depolama için hook’lar içerir. Zamanlayıcılar ve animasyonlar, render motorunun kare temposunu izler.

#Zamanlayıcılar

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

İkisi de her zaman en güncel geri çağırma işlevini çağırır. null onları durdurur.

#useAnimationFrame

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

useAnimationFrame her kare aralığında bir kez çalışır. Text.js saniyede yaklaşık 15 kare üretir; bu nedenle daha hızlı animasyon, konsola hiç yazılmayan kareler için CPU harcar. Döngüler her hız için tek bir zamanlayıcıyı paylaşır ve çıktı duraklatıldığında durur.

#useTween ve useSpring

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

İkisi de hedefe doğru animasyonla değişen bir sayı döndürür ve hedefe yerleştiğinde çalışmayı durdurur. easings, linear, easeOutCubic, easeInOutCubic, easeOutExpo ve diğerlerini içerir.

#useMeasure

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

Layout, React değişiklikleri uyguladıktan sonra çalışır; bu nedenle boyutlar bir kare sonra gelir. Yalnızca boyut değiştiğinde yeniden render eder.

#useBreakpoint

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

Kesme noktaları sütun cinsindendir. Kendi eşiklerinizi argüman olarak geçirin.

#useLocalStorage

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

useLocalStorage, JSON verisini localStorage içinde, tarayıcı dışında ise bellekte saklar. Aynı anahtarı paylaşan hook’lar, sekmeler arasında da eşzamanlı kalır.

#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> görünmez bir odak sınırıdır. trap ile Tab ve useInput, tıpkı arka plan katmanı olmayan bir <Modal> gibi bu sınırın içinde kalır.

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