fix(react): add missing layout prop

LottieFiles · Dec 17, 2024 · f5d330b · f5d330b
1 parent fad1e71
commit f5d330b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/.changeset/sixty-shoes-roll.md b/.changeset/sixty-shoes-roll.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-react': patch
+---
+
+fix: add missing layout prop
diff --git a/packages/react/src/base-dotlottie-react.tsx b/packages/react/src/base-dotlottie-react.tsx
@@ -54,6 +54,7 @@ export const BaseDotLottieReact = <T extends DotLottie | DotLottieWorker>({
   createDotLottie,
   data,
   dotLottieRefCallback,
+  layout,
   loop,
   mode,
   playOnHover,
@@ -89,6 +90,7 @@ export const BaseDotLottieReact = <T extends DotLottie | DotLottieWorker>({
     workerId,
     src,
     data,
+    layout,
     renderConfig,
   };
 
@@ -223,6 +225,13 @@ export const BaseDotLottieReact = <T extends DotLottie | DotLottieWorker>({
     dotLottieRef.current?.setThemeData(themeData ?? '');
   }, [themeData]);
 
+  useEffect(() => {
+    dotLottieRef.current?.setLayout({
+      align: layout?.align ?? [0.5, 0.5],
+      fit: layout?.fit ?? 'contain',
+    });
+  }, [layout?.align[0], layout?.align[1], layout?.fit]);
+
   return (
     <div
       className={className}

diff --git a/packages/react/tests/dotlottie-react.spec.tsx b/packages/react/tests/dotlottie-react.spec.tsx
@@ -684,4 +684,48 @@ describe.each([
       speed: 2,
     });
   });
+
+  test('calls dotLottie.setLayout when layout prop changes', async () => {
+    const onLoad = vi.fn();
+    const dotLottieRefCallback = vi.fn();
+
+    const { rerender } = render(<Component src={dotLottieSrc} autoplay dotLottieRefCallback={dotLottieRefCallback} />);
+
+    await vi.waitFor(() => {
+      expect(dotLottieRefCallback).toHaveBeenCalledTimes(1);
+    });
+
+    const dotLottie = dotLottieRefCallback.mock.calls[0]?.[0];
+
+    dotLottie?.addEventListener('load', onLoad);
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalledTimes(1);
+    });
+
+    const setLayout = vi.spyOn(dotLottie, 'setLayout');
+
+    rerender(
+      <Component
+        src={dotLottieSrc}
+        autoplay
+        layout={{ align: [0.5, 0.5], fit: 'contain' }}
+        dotLottieRefCallback={dotLottieRefCallback}
+      />,
+    );
+
+    await vi.waitFor(() => {
+      expect(setLayout).toHaveBeenCalledTimes(1);
+    });
+
+    expect(setLayout).toHaveBeenCalledWith({ align: [0.5, 0.5], fit: 'contain' });
+
+    rerender(<Component src={dotLottieSrc} autoplay dotLottieRefCallback={dotLottieRefCallback} />);
+
+    await vi.waitFor(() => {
+      expect(setLayout).toHaveBeenCalledTimes(2);
+    });
+
+    expect(setLayout).toHaveBeenCalledWith({ align: [0.5, 0.5], fit: 'contain' });
+  });
 });