use the oficial lottie react library

Author: gabrielmfern

packages/react-email/package.json

@@ -38,10 +38,6 @@
     "ora": "5.4.1",
     "socket.io": "4.8.0"
   },
-  "overrides": {
-    "react": "^19",
-    "react-dom": "^19"
-  },
   "devDependencies": {
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.1.0",
@@ -65,7 +61,7 @@
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
-    "lottie-react": "^2.4.0",
+    "@lottiefiles/dotlottie-react": "0.12.3",
     "node-html-parser": "6.1.13",
     "postcss": "8.4.40",
     "prettier-plugin-tailwindcss": "0.6.6",

packages/react-email/src/components/button.tsx

@@ -1,10 +1,10 @@
 'use client';
 import * as SlotPrimitive from '@radix-ui/react-slot';
-import Lottie from 'lottie-react';
 import type * as React from 'react';
 import animatedLoadIcon from '../animated-icons-data/load.json';
 import { cn } from '../utils/cn';
 import { unreachable } from '../utils/unreachable';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 
 type RootProps = React.ComponentProps<'button'>;
 
@@ -49,9 +49,9 @@ export const Button = ({
           loading && 'opacity-100',
         )}
       >
-        <Lottie
-          animationData={animatedLoadIcon}
-          autoPlay={false}
+        <DotLottieReact
+          data={animatedLoadIcon}
+          autoplay={false}
           className="h-5 w-5"
           loop={true}
         />

packages/react-email/src/components/sidebar/sidebar.tsx

@@ -5,6 +5,7 @@ import { clsx } from 'clsx';
 import { motion } from 'framer-motion';
 import Lottie from 'lottie-react';
 import Link from 'next/link';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import type * as React from 'react';
 import animatedHelpIcon from '../../animated-icons-data/help.json';
@@ -220,12 +221,14 @@ export const Sidebar = ({
             tabValue="file-tree"
             tooltipText="File Explorer"
           >
-            <Lottie
-              animationData={animatedMailIcon as object}
-              autoPlay={false}
+            <DotLottieReact
+              data={animatedMailIcon}
+              autoplay={false}
               className="h-5 w-5"
               loop={false}
-              lottieRef={mailAnimation.ref}
+              dotLottieRefCallback={(instance) => {
+                mailAnimation.ref.current = instance;
+              }}
             />
           </TabTrigger>
           <TabTrigger
@@ -236,12 +239,14 @@ export const Sidebar = ({
             tabValue="link-checker"
             tooltipText="Link Checker"
           >
-            <Lottie
-              animationData={animatedLinkIcon as object}
-              autoPlay={false}
+            <DotLottieReact
+              data={animatedLinkIcon}
+              autoplay={false}
               className="h-6 w-6"
               loop={false}
-              lottieRef={linkAnimation.ref}
+              dotLottieRefCallback={(instance) => {
+                linkAnimation.ref.current = instance;
+              }}
             />
           </TabTrigger>
           <TabTrigger
@@ -261,12 +266,14 @@ export const Sidebar = ({
               side="right"
               tooltip="Documentation"
             >
-              <Lottie
-                animationData={animatedHelpIcon as object}
-                autoPlay={false}
+              <DotLottieReact
+                data={animatedHelpIcon}
+                autoplay={false}
                 className="h-5 w-5"
                 loop={false}
-                lottieRef={helpAnimation.ref}
+                dotLottieRefCallback={(instance) => {
+                  helpAnimation.ref.current = instance;
+                }}
               />
             </NavigationButton>
             <NavigationButton

packages/react-email/src/hooks/use-icon-animation.ts

@@ -1,11 +1,11 @@
-import type { LottieRefCurrentProps } from 'lottie-react';
+import type { DotLottie } from '@lottiefiles/dotlottie-react';
 import * as React from 'react';
 
 const TIMEOUT = 150;
 const THRESHOLD_ANIMATION = 0.9;
 
 export const useIconAnimation = () => {
-  const ref = React.useRef<LottieRefCurrentProps>(null);
+  const ref = React.useRef<DotLottie>(null);
   const timer = React.useRef<NodeJS.Timeout | null>(null);
 
   const onMouseLeave = React.useCallback(() => {
@@ -17,9 +17,9 @@ export const useIconAnimation = () => {
       return;
     }
 
-    const total = Math.round(ref.current.animationItem?.totalFrames ?? 0);
+    const total = Math.round(ref.current.totalFrames ?? 0);
     const current = Math.round(
-      (ref.current.animationItem?.currentFrame ?? 0) + 1,
+      (ref.current.currentFrame ?? 0) + 1,
     );
 
     if (current === 1 || current >= total * THRESHOLD_ANIMATION) {
@@ -29,7 +29,6 @@ export const useIconAnimation = () => {
         }
 
         ref.current.stop();
-        ref.current.setDirection(1);
         ref.current.setSpeed(1);
         ref.current.play();
       }, TIMEOUT);