Hooks utilitários

Text.js inclui hooks para temporizadores, animação, medição e persistência. Temporizadores e animações seguem a cadência de quadros do renderizador.

#Temporizadores

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

Ambos sempre chamam o callback mais recente. null interrompe os dois.

#useAnimationFrame

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

useAnimationFrame executa uma vez por intervalo de quadro. Text.js emite cerca de 15 quadros por segundo, então animar mais rápido gasta CPU com quadros que nunca são registrados no console. Os loops compartilham um temporizador por frequência e param enquanto a saída está pausada.

#useTween e useSpring

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

Ambos retornam um número que anima em direção ao valor de destino e param de executar quando se estabilizam. easings contém linear, easeOutCubic, easeInOutCubic, easeOutExpo e outras funções.

#useMeasure

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

O layout é calculado após o React aplicar as alterações, então as dimensões chegam um quadro depois. Uma nova renderização só ocorre quando as dimensões mudam.

#useBreakpoint

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

Os breakpoints são medidos em colunas. Passe seus próprios limites como argumento.

#useLocalStorage

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

useLocalStorage armazena JSON em localStorage e, fora do navegador, na memória. Hooks que compartilham uma chave permanecem sincronizados, inclusive entre abas.

#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> é um limite de foco invisível. Com trap, Tab e useInput ficam dentro dele, exatamente como um <Modal> sem a sobreposição.

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