fix: useInteractivity adds another wrapping div that is not accessible to the consumer #42

Author: Gamote

src/components/Lottie.ts

@@ -22,6 +22,7 @@ const Lottie = (props: LottieComponentProps) => {
     setSubframe,
     getDuration,
     destroy,
+    animationContainerRef,
     animationLoaded,
     animationItem,
   } = useLottie(lottieProps, style);
@@ -43,14 +44,15 @@ const Lottie = (props: LottieComponentProps) => {
         setSubframe,
         getDuration,
         destroy,
+        animationContainerRef,
         animationLoaded,
         animationItem,
       };
     }
   }, [props.lottieRef?.current]);
 
   if (interactivity) {
-    const EnhancedView = useLottieInteractivity({
+    return useLottieInteractivity({
       lottieObj: {
         View,
         play,
@@ -64,13 +66,12 @@ const Lottie = (props: LottieComponentProps) => {
         setSubframe,
         getDuration,
         destroy,
+        animationContainerRef,
         animationLoaded,
         animationItem,
       },
       ...interactivity,
     });
-
-    return EnhancedView;
   }
 
   return View;

src/hooks/useLottie.tsx

@@ -335,6 +335,7 @@ const useLottie = (
     setSubframe,
     getDuration,
     destroy,
+    animationContainerRef: animationContainer,
     animationLoaded,
     animationItem: animationInstanceRef.current,
   };

src/hooks/useLottieInteractivity.tsx

@@ -1,5 +1,5 @@
 import { AnimationSegment } from "lottie-web";
-import React, { useEffect, ReactElement, useRef } from "react";
+import React, { useEffect, ReactElement } from "react";
 import { InteractivityProps } from "../types";
 
 // helpers
@@ -256,10 +256,9 @@ const useLottieInteractivity = ({
 }: InteractivityProps): ReactElement => {
   const { animationItem, View } = lottieObj;
 
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  useInitInteractivity({ actions, animationItem, mode, wrapperRef });
+  useInitInteractivity({ actions, animationItem, mode, wrapperRef: lottieObj.animationContainerRef });
 
-  return <div ref={wrapperRef}>{View}</div>;
+  return View;
 };
 
 export default useLottieInteractivity;

src/types.ts

@@ -1,7 +1,7 @@
 import React, {
   MutableRefObject,
   AnimationEventHandler,
-  ReactElement,
+  ReactElement, RefObject
 } from "react";
 import {
   AnimationConfigWithData,
@@ -19,13 +19,11 @@ export type LottieRefCurrentProps = {
   goToAndStop: (value: number, isFrame?: boolean) => void;
   goToAndPlay: (value: number, isFrame?: boolean) => void;
   setDirection: (direction: AnimationDirection) => void;
-  playSegments: (
-    segments: AnimationSegment | AnimationSegment[],
-    forceFlag?: boolean,
-  ) => void;
+  playSegments: (segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean) => void;
   setSubframe: (useSubFrames: boolean) => void;
   getDuration: (inFrames?: boolean) => number | undefined;
   destroy: () => void;
+  animationContainerRef: RefObject<HTMLDivElement>;
   animationLoaded: boolean;
   animationItem: AnimationItem | undefined;
 };