SSR, testning och produktion

Serverrendering

Hookvärden renderar sitt startvärde i serverns markup, och animationen fortsätter efter hydrering. React 18 och senare använder useId för stabila variabelnamn; på servrar med React 16 och 17 skickar du ett 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>
  );
}

Stabila id:n i äldre React

Behövs bara vid 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' });

Städning du kan lita på

Allt en komponent äger släpps tillsammans med den.

• useAnimated, useAnimatedValue, useTimeline och useReorder stoppar sina controllers och lyssnare vid unmount.
• Controllers och inmatning som deklareras i en useAnimated-factory ersätts tillsammans när ett beroende ändras.
• Animated.Keep tar bort barn som lämnar efter deras rörelse, och en ny pose avbryter från den aktuella positionen.
• Utanför React returnerar bind, bindOutput, createTimeline och createLayoutScene en explicit dispose.

Testning

flushAnimatedUpdates() tillämpar väntande utdata synkront så att deterministiska tester kan kontrollera DOM.

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

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

Text, attribut och egenskaper

output(target, mapping) inuti useAnimated äger en utdata till stil, attribut, text eller objektegenskap. bindOutput kopplar samma mappning direkt och returnerar flush och 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} />;