Вспомогательные хуки

Text.js включает хуки для таймеров, анимации, измерений и сохранения данных. Таймеры и анимации следуют ритму кадров рендерера.

#Таймеры

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

Оба хука всегда вызывают последнюю версию колбэка. null останавливает их.

#useAnimationFrame

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

useAnimationFrame срабатывает один раз за интервал кадра. Text.js выводит около 15 кадров в секунду, поэтому более частая анимация тратит ресурсы процессора на кадры, которые никогда не попадают в консоль. Циклы с одинаковой частотой используют общий таймер и останавливаются, пока вывод приостановлен.

#useTween и useSpring

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

Оба хука возвращают число, которое плавно приближается к целевому значению, и прекращают обновления, когда оно достигнуто. easings содержит linear, easeOutCubic, easeInOutCubic, easeOutExpo и другие функции.

#useMeasure

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

Расчёт макета выполняется после фиксации изменений React, поэтому размеры поступают на один кадр позже. Повторный рендеринг происходит только при изменении размера.

#useBreakpoint

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

Контрольные точки задаются в столбцах. Передайте собственные пороговые значения в качестве аргумента.

#useLocalStorage

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

useLocalStorage хранит JSON в localStorage, а вне браузера — в памяти. Хуки с общим ключом остаются синхронизированными, в том числе между вкладками.

#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> — невидимая граница фокуса. С trap клавиша Tab и хук useInput работают только внутри неё, как в <Modal> без перекрывающего слоя.

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