Hilfs-Hooks

Text.js enthält Hooks für Timer, Animation, Messung und Persistenz. Timer und Animationen folgen dem Frame-Takt des Renderers.

#Timer

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

Beide rufen immer den neuesten Callback auf. null stoppt sie.

#useAnimationFrame

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

useAnimationFrame tickt einmal pro Frame-Zeitfenster. Text.js gibt etwa 15 Frames pro Sekunde aus, daher verbrauchen schnellere Animationen CPU-Zeit für Frames, die nie in der Konsole landen. Schleifen teilen sich einen Timer pro Taktrate und stoppen, solange die Ausgabe pausiert.

#useTween und useSpring

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

Beide geben eine Zahl zurück, die sich animiert dem Zielwert nähert, und hören auf zu ticken, sobald sie zur Ruhe kommen. easings enthält linear, easeOutCubic, easeInOutCubic, easeOutExpo und weitere.

#useMeasure

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

Das Layout läuft nach dem React-Commit, daher stehen Größen einen Frame später bereit. Nur wenn sich die Größe ändert, wird erneut gerendert.

#useBreakpoint

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

Breakpoints sind in Spalten angegeben. Übergib eigene Schwellenwerte als Argument.

#useLocalStorage

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

useLocalStorage speichert JSON in localStorage und außerhalb des Browsers im Arbeitsspeicher. Hooks mit demselben Schlüssel bleiben synchron, auch über Tabs hinweg.

#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> ist eine unsichtbare Fokusgrenze. Mit trap bleiben Tab und useInput innerhalb dieser Grenze, genau wie bei einem <Modal> ohne Overlay.

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