ユーティリティーフック
useInterval、useAnimationFrame、useTween、useSpring、useMeasure、useBreakpoint、useLocalStorage。
Text.jsには、タイマー、アニメーション、計測、永続化のためのフックが含まれています。タイマーとアニメーションは、レンダラーのフレーム間隔に従います。
タイマー
useInterval(refresh, live ? 1000 : null);useTimeout(() => setHint(false), 3000);どちらも常に最新のコールバックを呼び出します。null を渡すと停止します。
useAnimationFrame
useAnimationFrame((delta, elapsed) => setPhase(elapsed / 1000), { isActive: playing });useAnimationFrame はフレームスロットごとに1回実行されます。Text.jsは1秒あたり約15フレームを出力するため、それより速くアニメーションを更新すると、ログに出力されないフレームにCPUを費やします。ループは同じ更新頻度ごとに1つのタイマーを共有し、出力が一時停止している間は停止します。
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のコミット後に実行されるため、サイズは1フレーム遅れて取得されます。サイズが変わったときにのみ再レンダリングします。
useBreakpoint
const { breakpoint, up } = useBreakpoint();return up("md") ? <TwoColumns /> : <OneColumn />;| Breakpoint | 列数 |
|---|---|
xs | 0 |
sm | 60 |
md | 80 |
lg | 110 |
xl | 140 |
ブレークポイントの単位は列数です。独自のしきい値を引数として渡してください。
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 を指定すると、オーバーレイのない <Modal> と同じように、Tab と useInput の動作範囲がその内側に制限されます。
<FocusScope trap={editing}> <Input autoFocus /></FocusScope>