SSR, testing og produksjon

Serverrendering

Hook-verdier renderer startverdien sin i serverens markup, og animasjonen fortsetter etter hydrering. React 18 og nyere bruker useId for stabile variabelnavn; på servere med React 16 og 17 sender du en id.

import { AnimatedProvider } from '@kkwaenggwari/animated';

// The package entry is marked 'use client'. A server layout can render the
// provider directly; hooks and Animated.<tag> go inside Client Components.
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnimatedProvider>{children}</AnimatedProvider>
      </body>
    </html>
  );
}

Stabile id-er i eldre React

Trengs bare ved serverrendering med React 16 eller 17.

// React 18+ uses useId automatically. On React 16/17 servers, pass a stable id.
const progress = useAnimatedValue(0, { id: 'hero-progress' });

Opprydding du kan stole på

Alt en komponent eier, frigjøres sammen med den.

• useAnimated, useAnimatedValue, useTimeline og useReorder stopper kontrollerne og lytterne sine ved unmount.
• Kontrollere og inndata som deklareres i en useAnimated-factory, byttes ut samlet når en avhengighet endres.
• Animated.Keep fjerner barn som forlater, etter bevegelsen deres, og en ny pose avbryter fra gjeldende posisjon.
• Utenfor React returnerer bind, bindOutput, createTimeline og createLayoutScene en eksplisitt dispose.

Testing

flushAnimatedUpdates() bruker ventende utdata synkront, så deterministiske tester kan sjekke DOM-en.

import { flushAnimatedUpdates } from '@kkwaenggwari/animated';

act(() => progress.setValue(0.5));
flushAnimatedUpdates();
// Pending style writes are applied now; assert on the DOM.

Tekst, attributter og egenskaper

output(target, mapping) inne i useAnimated eier utdata til stil, attributt, tekst eller objektegenskap. bindOutput kobler den samme mappingen med en gang og returnerer flush og dispose.

const label = useRef(null);

const count = useAnimated(
  0,
  (value) => {
    output(label, { text: new AnimatedComputed([value], (v) => `${Math.round(v * 100)}%`) });
    timing(value, { toValue: 1, duration: 1200 });
  },
  [],
);

<span ref={label} />;