diff --git a/README.md b/README.md index 28067d2..0c7e230 100644 --- a/README.md +++ b/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 diff --git a/src/SheetBackdrop.tsx b/src/SheetBackdrop.tsx index 0220fd6..c0a72ad 100644 --- a/src/SheetBackdrop.tsx +++ b/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( - ({ 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( pointerEvents, }; + const animationProps: MotionProps = disableAnimation + ? {} + : { + initial: { opacity: 0 }, + animate: { opacity: 1 }, + exit: { opacity: 0 }, + transition: { duration: 1 }, + }; + return ( ); } diff --git a/src/types.tsx b/src/types.tsx index 036ee77..c918f3f 100644 --- a/src/types.tsx +++ b/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, - 'initial' | 'animate' | 'exit' ->; +type MotionProps = ComponentPropsWithoutRef; + +type MotionCommonProps = Omit; export interface SheetTweenConfig { ease: EasingDefinition; @@ -78,7 +75,10 @@ export type SheetContentProps = MotionCommonProps & scrollRef?: RefObject; }; -export type SheetBackdropProps = MotionCommonProps & CommonProps; +export type SheetBackdropProps = MotionProps & + CommonProps & { + disableAnimation?: boolean; + }; export type SheetDragIndicatorProps = HTMLAttributes & CommonProps;