Hook utilitas

Text.js menyertakan hook untuk timer, animasi, pengukuran, dan persistensi. Timer dan animasi mengikuti pengaturan tempo frame renderer.

#Timer

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

Keduanya selalu memanggil callback terbaru. null menghentikan keduanya.

#useAnimationFrame

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

useAnimationFrame berjalan sekali per slot frame. Text.js menghasilkan sekitar 15 frame per detik, jadi animasi yang lebih cepat menghabiskan CPU untuk frame yang tidak pernah dicatat ke konsol. Loop berbagi satu timer per laju dan berhenti saat output dijeda.

#useTween dan useSpring

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

Keduanya mengembalikan angka yang beranimasi menuju target dan berhenti berjalan setelah nilainya stabil. easings memuat linear, easeOutCubic, easeInOutCubic, easeOutExpo, dan lainnya.

#useMeasure

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

Layout berjalan setelah React menyelesaikan commit, sehingga ukuran tersedia satu frame kemudian. Rendering ulang hanya terjadi saat ukuran berubah.

#useBreakpoint

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

Breakpoint menggunakan satuan kolom. Berikan ambang batas Anda sendiri sebagai argumen.

#useLocalStorage

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

useLocalStorage menyimpan JSON di localStorage, dan di memori saat berada di luar browser. Hook yang berbagi kunci tetap sinkron, termasuk antartab.

#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> adalah batas fokus yang tidak terlihat. Dengan trap, Tab dan useInput tetap berada di dalamnya, persis seperti <Modal> tanpa overlay.

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