Motion Drawer
A motion drawer component for React with smooth Framer Motion animations. Functions as a collapsible navigation drawer on mobile and a persistent sidebar on desktop.
Installation
npx uilayouts@latest add motion-drawer
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| overlayColor | string | 'rgba(0, 0, 0, 0.3)' | Color of the background overlay. |
| width | number | 300 | Width of the side menu. |
| direction | 'left' | 'right' | 'left' | The direction from which the menu opens. |
| backgroundColor | string | '#ffffff' | Background color of the side menu. |
| children | React.ReactNode | The content to display inside the side menu. | |
| isOpen | boolean | Controls the open/closed state of the menu. | |
| onToggle | (isOpen: boolean) => void | Callback when the menu is opened or closed. | |
| showToggleButton | boolean | true | Whether to show the toggle button. |
| toggleButtonText | { open: string; close: string } | Custom text for the toggle button. | |
| className | string | '' | Custom className for the container. |
| contentClassName | string | '' | Custom className for the content area. |
| overlayClassName | string | '' | Custom className for the overlay. |
| animationConfig | { type?: 'spring' | 'tween'; damping?: number; stiffness?: number; duration?: number } | { type: 'spring', damping: 25, stiffness: 120 } | Configuration for the animation. |
| enableDrag | boolean | true | Whether to allow drag-to-close. |
| dragThreshold | number | 0.3 | Threshold for drag-to-close. |
| buttonOpeningVariants | 'push' | 'merge' | 'stay' | 'merge' | Controls how the toggle button animates when the menu opens. |