SSR, टेस्टिंग और प्रोडक्शन

सर्वर रेंडरिंग

हुक के मान अपना शुरुआती मान सर्वर markup में रेंडर करते हैं, और एनिमेशन हाइड्रेशन के बाद जारी रहता है। React 18 और नए संस्करण स्थिर वेरिएबल नामों के लिए useId इस्तेमाल करते हैं; React 16 और 17 के सर्वर पर 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>
  );
}

पुराने React में स्थिर id

सिर्फ़ React 16 या 17 के साथ सर्वर रेंडरिंग में ज़रूरी।

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

सफ़ाई जिस पर आप भरोसा कर सकते हैं

कंपोनेंट की हर चीज़ उसके साथ छूट जाती है।

• useAnimated, useAnimatedValue, useTimeline और useReorder अनमाउंट पर अपने कंट्रोलर और listener रोकते हैं।
• useAnimated की factory में घोषित कंट्रोलर और इनपुट निर्भरता बदलने पर साथ में बदले जाते हैं।
• Animated.Keep जाते हुए children को उनकी गति के बाद हटाता है, और नया pose मौजूदा स्थिति से रुकावट डालता है।
• React के बाहर bind, bindOutput, createTimeline और createLayoutScene स्पष्ट dispose लौटाते हैं।

टेस्टिंग

flushAnimatedUpdates() लंबित आउटपुट सिंक्रोनस रूप से लागू करता है, ताकि निर्धारक टेस्ट DOM की जाँच कर सकें।

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

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

टेक्स्ट, एट्रिब्यूट और प्रॉपर्टी

useAnimated के भीतर output(target, mapping) स्टाइल, एट्रिब्यूट, टेक्स्ट या ऑब्जेक्ट प्रॉपर्टी आउटपुट का मालिक है। bindOutput वही मैपिंग तुरंत जोड़ता है और flush व 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} />;