Hooks utilitaires

Text.js inclut des hooks pour les temporisateurs, l’animation, la mesure et la persistance. Les temporisateurs et les animations suivent la cadence des frames du moteur de rendu.

#Temporisateurs

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

Tous deux appellent toujours la fonction de rappel la plus récente. null les arrête.

#useAnimationFrame

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

useAnimationFrame s’exécute une fois par créneau de frame. Text.js émet environ 15 frames par seconde, donc animer plus vite consomme du CPU pour des frames qui ne sont jamais affichées dans la console. Les boucles partagent un temporisateur par fréquence et s’arrêtent lorsque la sortie est en pause.

#useTween et useSpring

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

Tous deux renvoient un nombre qui évolue vers la cible et cessent de s’exécuter une fois stabilisés. easings contient linear, easeOutCubic, easeInOutCubic, easeOutExpo et d’autres fonctions.

#useMeasure

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

Le calcul du layout s’exécute après la phase de commit de React, donc les dimensions arrivent une frame plus tard. Il ne déclenche un nouveau rendu que lorsque les dimensions changent.

#useBreakpoint

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

Les points de rupture s’expriment en colonnes. Passez vos propres seuils en argument.

#useLocalStorage

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

useLocalStorage stocke du JSON dans localStorage, et en mémoire hors du navigateur. Les hooks qui partagent une clé restent synchronisés, y compris entre les onglets.

#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> est une limite de focus invisible. Avec trap, Tab et useInput restent à l’intérieur, exactement comme dans un <Modal> sans la surcouche.

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