Stage2: Confetti will start and stop on clicking of start and stop bu…

…tton in parent respectively.

Also on unmount and stop animation frame request will be cancelled

src/App.js

@@ -3,6 +3,7 @@ import Confetti from './confetti';
 
 function App() {
   const [showConfetti, setShowConfetti] = useState(false);
+  const [start, setStart] = useState(false);
   return (
     <div className="App">
       <button
@@ -18,7 +19,9 @@ function App() {
       </button>
       {showConfetti && (
         <div style={{ width: '100vh', height: '100vh', background: 'pink' }}>
-          <Confetti animationTimeout={5000} />
+          <button onClick={() => setStart(true)}>start</button>
+          <button onClick={() => setStart(false)}>stop</button>
+          <Confetti playAnimation={start} />
         </div>
       )}
     </div>

src/confetti/index.js

@@ -21,7 +21,7 @@ const globalThis = window;
 
 const { requestAnimationFrame, cancelAnimationFrame } = globalThis;
 
-const Confetti = (props) => {
+const Confetti = ({ playAnimation = false, styles = {} }) => {
   const canvasRef = useRef(null);
   let count = 200;
   const particles = [];
@@ -88,39 +88,35 @@ const Confetti = (props) => {
   };
 
   useEffect(() => {
-    const canvas = canvasRef.current;
-    const context = canvas.getContext('2d');
-    const { width, height } = canvas.getBoundingClientRect();
-    if (canvas.width !== width || canvas.height !== height) {
-      const { devicePixelRatio: ratio = 1 } = globalThis;
+    if (playAnimation === true) {
+      const canvas = canvasRef.current;
       const context = canvas.getContext('2d');
-      /**
-       * In case the device pixel ratio is more, the particles will be pixelated and will semm blur.
-       * That's why we are resizing the canvas.
-       * */
-      canvas.width = width * ratio;
-      canvas.height = height * ratio;
-      count = parseInt(canvas.width / 10, 10);
-      context.scale(ratio, ratio);
-    }
-    if (props.animationTimeout) {
-      setTimeout(() => {
-        cancelAnimationFrame(animationId);
-      }, props.animationTimeout);
+      const { width, height } = canvas.getBoundingClientRect();
+      if (canvas.width !== width || canvas.height !== height) {
+        const { devicePixelRatio: ratio = 1 } = globalThis;
+        /**
+         * In case the device pixel ratio is more, the particles will be pixelated and will semm blur.
+         * That's why we are resizing the canvas.
+         * */
+        canvas.width = width * ratio;
+        canvas.height = height * ratio;
+        count = parseInt(canvas.width / 10, 10);
+        context.scale(ratio, ratio);
+      }
+      startAnimation(context);
     }
-    startAnimation(context);
     return () => {
       cancelAnimationFrame(animationId);
     };
-  }, []);
+  }, [playAnimation]);
 
   return (
     <canvas
       ref={canvasRef}
       style={{
         height: '100%',
         width: '100%',
-        ...props.style
+        ...styles
       }}
     />
   );