Fix: React wrapper (#84)

* docs: update react demo example

* fix: react jsx wrapper

* revert: demo changes

* fix: add missing debug prop

---------

Co-authored-by: Anonymous <[email protected]>

src/ScrollyVideo.jsx

@@ -1,44 +1,82 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import ScrollyVideo from './ScrollyVideo';
 
-function ScrollyVideoComponent(props) {
-
-  // variable to hold the DOM element
+function ScrollyVideoComponent({
+  src,
+  transitionSpeed,
+  frameThreshold,
+  cover,
+  sticky,
+  full,
+  trackScroll,
+  useWebCodecs,
+  videoPercentage,
+  debug,
+}) {
   const containerElement = useRef(null);
-
-  // ref to hold the scrollyVideo object
   const scrollyVideoRef = useRef(null);
 
-  // Store the props so we know when things change
-  const [lastPropsString, setLastPropsString] = useState('');
+  const videoPercentageRef = useRef(videoPercentage);
+  videoPercentageRef.current = videoPercentage;
 
+  // effect for destroy and recreate on props change (except video percentage)
   useEffect(() => {
-    if (containerElement) {
-      // separate out the videoPercentage prop
-      const { videoPercentage, ...restProps } = props;
+    if (!containerElement.current) return;
 
-      if (JSON.stringify(restProps) !== lastPropsString) {
-        // if scrollyvideo already exists and any parameter is updated, destroy and recreate.
-        if (scrollyVideoRef.current && scrollyVideoRef.current.destroy) scrollyVideoRef.current.destroy();
-        scrollyVideoRef.current = new ScrollyVideo({ scrollyVideoContainer: containerElement.current, ...props });
+    // if scrollyVideo already exists and any parameter is updated, destroy and recreate.
+    if (scrollyVideoRef.current && scrollyVideoRef.current.destroy) {
+      scrollyVideoRef.current.destroy();
+    }
 
-        // Save the new props
-        setLastPropsString(JSON.stringify(restProps));
-      }
+    scrollyVideoRef.current = new ScrollyVideo({
+      scrollyVideoContainer: containerElement.current,
+      src,
+      transitionSpeed,
+      frameThreshold,
+      cover,
+      sticky,
+      full,
+      trackScroll,
+      useWebCodecs,
+      debug,
+      videoPercentage: videoPercentageRef.current,
+    });
+  }, [
+    src,
+    transitionSpeed,
+    frameThreshold,
+    cover,
+    sticky,
+    full,
+    trackScroll,
+    useWebCodecs,
+    debug,
+  ]);
 
-      // If we need to update the target time percent
-      if (scrollyVideoRef.current && typeof videoPercentage === 'number' && videoPercentage >= 0 && videoPercentage <= 1) {
-        scrollyVideoRef.current.setTargetTimePercent(videoPercentage);
-      }
+  // effect for video percentage change
+  useEffect(() => {
+    // If we need to update the target time percent
+    if (
+      scrollyVideoRef.current &&
+      typeof videoPercentage === 'number' &&
+      videoPercentage >= 0 &&
+      videoPercentage <= 1
+    ) {
+      scrollyVideoRef.current.setTargetTimePercent(videoPercentage);
     }
+  }, [videoPercentage]);
 
-    // Cleanup the component on unmount
-    return () => {
-      if (scrollyVideoRef.current && scrollyVideoRef.current.destroy) scrollyVideoRef.current.destroy();
-    }
-  }, [containerElement, props]);
+  // effect for unmount
+  useEffect(
+    () => () => {
+      if (scrollyVideoRef.current && scrollyVideoRef.current.destroy) {
+        scrollyVideoRef.current.destroy();
+      }
+    },
+    []
+  );
 
-  return (<div ref={containerElement} />);
+  return <div ref={containerElement} />;
 }
 
 export default ScrollyVideoComponent;