Hook di utilità

Text.js include hook per timer, animazione, misurazione e persistenza. I timer e le animazioni seguono la cadenza dei frame del renderer.

#Timer

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

Entrambi chiamano sempre la callback più recente. null li arresta.

#useAnimationFrame

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

useAnimationFrame si attiva una volta per intervallo di frame. Text.js emette circa 15 frame al secondo, quindi animare più velocemente consuma CPU per frame che non vengono mai scritti nella console. I cicli condividono un timer per ogni frequenza e si fermano quando l’output è in pausa.

#useTween e useSpring

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

Entrambi restituiscono un numero che si anima verso il valore di destinazione e smettono di aggiornarsi quando si stabilizzano. easings contiene linear, easeOutCubic, easeInOutCubic, easeOutExpo e altre funzioni.

#useMeasure

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

Il layout viene calcolato dopo il commit di React, quindi le dimensioni arrivano un frame dopo. Il rendering si ripete solo quando le dimensioni cambiano.

#useBreakpoint

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

I breakpoint sono espressi in colonne. Passa le tue soglie come argomento.

#useLocalStorage

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

useLocalStorage memorizza JSON in localStorage e, fuori dal browser, in memoria. Gli hook che condividono una chiave restano sincronizzati, anche tra schede.

#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> è un confine invisibile per il focus. Con trap, Tab e useInput restano al suo interno, esattamente come in un <Modal> senza overlay.

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