Hook tiện ích

Text.js có các hook cho bộ hẹn giờ, hoạt ảnh, đo lường và lưu trữ lâu dài. Bộ hẹn giờ và hoạt ảnh tuân theo nhịp frame của bộ render.

#Bộ hẹn giờ

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

Cả hai luôn gọi callback mới nhất. null dừng chúng.

#useAnimationFrame

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

useAnimationFrame chạy một lần mỗi lượt frame. Text.js xuất khoảng 15 frame mỗi giây, nên chạy hoạt ảnh nhanh hơn sẽ tốn CPU cho những frame không bao giờ ghi vào console. Các vòng lặp dùng chung một bộ hẹn giờ cho mỗi tần suất và dừng khi đầu ra tạm dừng.

#useTween và useSpring

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

Cả hai trả về một số thay đổi dần về giá trị đích và ngừng cập nhật khi ổn định. easings chứa linear, easeOutCubic, easeInOutCubic, easeOutExpo và các hàm khác.

#useMeasure

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

Layout chạy sau khi React commit, nên kích thước có sau một frame. Hook chỉ render lại khi kích thước thay đổi.

#useBreakpoint

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

Breakpoint tính theo số cột. Truyền các ngưỡng riêng của bạn làm đối số.

#useLocalStorage

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

useLocalStorage lưu JSON trong localStorage, và trong bộ nhớ khi chạy ngoài trình duyệt. Các hook dùng chung một khóa luôn đồng bộ, kể cả giữa các tab.

#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> là một ranh giới focus vô hình. Khi dùng trap, Tab và useInput luôn nằm bên trong ranh giới này, giống hệt <Modal> không có lớp phủ.

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