Hooks de utilidad

Text.js incluye hooks para temporizadores, animación, medición y persistencia. Los temporizadores y las animaciones siguen el ritmo de fotogramas del renderizador.

#Temporizadores

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

Ambos llaman siempre al callback más reciente. null los detiene.

#useAnimationFrame

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

useAnimationFrame se ejecuta una vez por intervalo de fotograma. Text.js emite unos 15 fotogramas por segundo, por lo que animar más rápido consume CPU en fotogramas que nunca se registran en la consola. Los bucles comparten un temporizador por frecuencia y se detienen mientras la salida está en pausa.

#useTween y useSpring

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

Ambos devuelven un número que se anima hacia el valor objetivo y dejan de actualizarse cuando se estabilizan. easings contiene linear, easeOutCubic, easeInOutCubic, easeOutExpo y otros.

#useMeasure

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

El layout se calcula después de que React confirma los cambios, por lo que las dimensiones llegan un fotograma después. Solo se vuelve a renderizar cuando cambia el tamaño.

#useBreakpoint

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

Los puntos de ruptura se expresan en columnas. Pasa tus propios umbrales como argumento.

#useLocalStorage

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

useLocalStorage almacena JSON en localStorage, y en memoria fuera del navegador. Los hooks que comparten una clave se mantienen sincronizados, también entre pestañas.

#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> es un límite de foco invisible. Con trap, Tab y useInput permanecen dentro de él, igual que en un <Modal> sin la capa superpuesta.

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