diff --git a/.changeset/sixty-shoes-roll.md b/.changeset/sixty-shoes-roll.md new file mode 100644 index 00000000..472c9e2f --- /dev/null +++ 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 index e07a878f..3e5ee762 100644 --- a/packages/react/src/base-dotlottie-react.tsx +++ b/packages/react/src/base-dotlottie-react.tsx @@ -54,6 +54,7 @@ export const BaseDotLottieReact = ({ createDotLottie, data, dotLottieRefCallback, + layout, loop, mode, playOnHover, @@ -89,6 +90,7 @@ export const BaseDotLottieReact = ({ workerId, src, data, + layout, renderConfig, }; @@ -223,6 +225,13 @@ export const BaseDotLottieReact = ({ 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 (
{ + const onLoad = vi.fn(); + const dotLottieRefCallback = vi.fn(); + + const { rerender } = render(); + + 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( + , + ); + + await vi.waitFor(() => { + expect(setLayout).toHaveBeenCalledTimes(1); + }); + + expect(setLayout).toHaveBeenCalledWith({ align: [0.5, 0.5], fit: 'contain' }); + + rerender(); + + await vi.waitFor(() => { + expect(setLayout).toHaveBeenCalledTimes(2); + }); + + expect(setLayout).toHaveBeenCalledWith({ align: [0.5, 0.5], fit: 'contain' }); + }); });