Add support for disabling SheetBackdrop animation

README.md

@@ -333,6 +333,10 @@ Sheet backdrop is a translucent overlay that helps to separate the sheet from it
 
 **⚠️ Note:** as the element is a motion component you need to use [`onTap`](https://motion.dev/docs/react-gestures#tap) instead of `onClick` if you want to add a click handler to it.
 
+| Name               | Required | Default | Description                                                                                                                                                                                 |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `disableAnimation` | no       | false   | Disable backdrop defaults animation.                                                                                                                                                        |
+
 > 🖥 Rendered element: `motion.div` or `motion.button`.
 
 ## ✨ Advanced behaviors

src/SheetBackdrop.tsx

@@ -1,4 +1,4 @@
-import { type MotionStyle, motion } from 'motion/react';
+import { MotionProps, type MotionStyle, motion } from 'motion/react';
 import React, { forwardRef } from 'react';
 
 import { useSheetContext } from './context';
@@ -9,7 +9,10 @@ import { applyStyles } from './utils';
 const isClickable = (props: any) => !!props.onClick || !!props.onTap;
 
 export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
-  ({ style, className = '', unstyled, ...rest }, ref) => {
+  (
+    { style, className = '', unstyled, disableAnimation = false, ...rest },
+    ref
+  ) => {
     const sheetContext = useSheetContext();
     const clickable = isClickable(rest);
     const Comp = clickable ? motion.button : motion.div;
@@ -23,16 +26,22 @@ export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
       pointerEvents,
     };
 
+    const animationProps: MotionProps = disableAnimation
+      ? {}
+      : {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 1 },
+        };
+
     return (
       <Comp
         {...(rest as any)}
         ref={ref}
         className={`react-modal-sheet-backdrop ${className}`}
         style={backdropStyle}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 1 }}
+        {...animationProps}
       />
     );
   }

src/types.tsx

@@ -1,5 +1,4 @@
 import {
-  type CSSProperties,
   type ComponentPropsWithoutRef,
   type ForwardRefExoticComponent,
   type FunctionComponent,
@@ -12,7 +11,6 @@ import {
 import {
   type DragHandler,
   type EasingDefinition,
-  type MotionProps,
   type MotionValue,
   type motion,
 } from 'motion/react';
@@ -24,10 +22,9 @@ type CommonProps = {
   unstyled?: boolean;
 };
 
-type MotionCommonProps = Omit<
-  ComponentPropsWithoutRef<typeof motion.div>,
-  'initial' | 'animate' | 'exit'
->;
+type MotionProps = ComponentPropsWithoutRef<typeof motion.div>;
+
+type MotionCommonProps = Omit<MotionProps, 'initial' | 'animate' | 'exit'>;
 
 export interface SheetTweenConfig {
   ease: EasingDefinition;
@@ -78,7 +75,10 @@ export type SheetContentProps = MotionCommonProps &
     scrollRef?: RefObject<HTMLDivElement | null>;
   };
 
-export type SheetBackdropProps = MotionCommonProps & CommonProps;
+export type SheetBackdropProps = MotionProps &
+  CommonProps & {
+    disableAnimation?: boolean;
+  };
 
 export type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps;