Hooki narzędziowe

Text.js zawiera hooki do timerów, animacji, pomiarów i trwałego przechowywania danych. Timery i animacje działają zgodnie z rytmem klatek renderera.

#Timery

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

Oba zawsze wywołują najnowszą funkcję zwrotną. null je zatrzymuje.

#useAnimationFrame

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

Hook useAnimationFrame wywołuje funkcję raz na przedział czasowy klatki. Text.js emituje około 15 klatek na sekundę, więc szybsza animacja zużywa CPU na klatki, które nigdy nie trafiają do konsoli. Pętle o tej samej częstotliwości współdzielą jeden timer i zatrzymują się, gdy wyjście jest wstrzymane.

#useTween i useSpring

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

Oba zwracają liczbę, która zmienia się w kierunku wartości docelowej, i przestają aktualizować ją po ustabilizowaniu. easings zawiera linear, easeOutCubic, easeInOutCubic, easeOutExpo i inne funkcje.

#useMeasure

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

Layout jest obliczany po zatwierdzeniu zmian przez React, więc wymiary są dostępne o jedną klatkę później. Ponowne renderowanie następuje tylko wtedy, gdy zmienia się rozmiar.

#useBreakpoint

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

Progi są wyrażone w kolumnach. Przekaż własne progi jako argument.

#useLocalStorage

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

Hook useLocalStorage przechowuje JSON w localStorage, a poza przeglądarką w pamięci. Hooki współdzielące klucz pozostają zsynchronizowane, również między kartami.

#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> to niewidoczna granica fokusu. Z włączonym trap klawisz Tab i hook useInput działają tylko w jej obrębie, dokładnie jak w komponencie <Modal> bez warstwy nakładki.

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