SSR, testen en productie

Server-rendering

Hookwaarden renderen hun beginwaarde in de server-markup, en de animatie gaat door na hydration. React 18 en nieuwer gebruiken useId voor stabiele variabelenamen; geef op React 16- en 17-servers een id mee.

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>
  );
}

Stabiele id's op oudere React

Alleen nodig bij server-rendering met React 16 of 17.

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

Opruiming waarop je kunt bouwen

Alles wat een component bezit, wordt samen met het component vrijgegeven.

• useAnimated, useAnimatedValue, useTimeline en useReorder stoppen hun controllers en listeners bij unmount.
• Controllers en invoer die in een useAnimated-factory zijn gedeclareerd, worden samen vervangen als een afhankelijkheid verandert.
• Animated.Keep verwijdert vertrekkende kinderen na hun beweging, en een nieuwe pose onderbreekt vanaf de huidige positie.
• Buiten React geven bind, bindOutput, createTimeline en createLayoutScene een expliciete dispose terug.

Testen

flushAnimatedUpdates() past openstaande uitvoer synchroon toe, zodat deterministische tests op de DOM kunnen controleren.

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

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

Tekst, attributen en eigenschappen

output(target, mapping) binnen useAnimated bezit een uitvoer naar stijl, attribuut, tekst of objecteigenschap. bindOutput koppelt dezelfde mapping direct en geeft flush en dispose terug.

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} />;