Page Content

The drawer will be contained within this blue border.

Contained Drawer

This drawer is constrained to its parent container instead of the entire viewport.

Drawer Title This is a basic drawer component with gesture support.

Drag the handle or swipe down to close the drawer.

); } ``` -------------------------------- ### Implement Nested Drawers in React Source: https://context7.com/enderh3art/vaul/llms.txt Demonstrates how to create drawers within drawers using Vaul's Drawer.NestedRoot component. This allows for hierarchical UI elements where parent drawers scale automatically. It requires the 'vaul' library. ```tsx import { Drawer } from 'vaul'; function NestedDrawersExample() { return (

First Drawer

This is the outer drawer. You can open another drawer inside.

{/* Nested drawer using NestedRoot */} Open Second Drawer

Nested Drawer

This drawer is nested inside the first one. The parent drawer scales automatically.

); } ``` -------------------------------- ### Handle Drawer Animation Completion with Callbacks Source: https://context7.com/enderh3art/vaul/llms.txt This snippet demonstrates how to use the `onAnimationEnd` and `onOpenChange` callbacks of the Vaul Drawer component to log animation events. It helps in understanding when the drawer's opening or closing animation finishes, and when its state changes. The `onAnimationEnd` callback is particularly useful for performing actions after the animation is complete, such as cleaning up state when the drawer closes. ```tsx import { useState } from 'react'; import { Drawer } from 'vaul'; function AnimationCallbacksDrawer() { const [animationLog, setAnimationLog] = useState([]); const handleAnimationEnd = (open: boolean) => { const timestamp = new Date().toLocaleTimeString(); const message = `${timestamp}: Animation ended - drawer is ${open ? 'open' : 'closed'}`; setAnimationLog(prev => [...prev, message].slice(-5)); if (!open) { console.log('Drawer closed animation complete - safe to clean up state'); } }; const handleOpenChange = (open: boolean) => { const timestamp = new Date().toLocaleTimeString(); setAnimationLog(prev => [...prev, `${timestamp}: State changed to ${open ? 'open' : 'closed'}`].slice(-5)); }; return (

Animation Log:

{animationLog.map((log, i) => (

{log}

))}

Animation Callbacks

Watch the log above to see when animations complete.

); } ``` -------------------------------- ### Track Drawer Drag Events with React Callbacks Source: https://context7.com/enderh3art/vaul/llms.txt Shows how to use `onDrag` and `onRelease` callbacks in Vaul Drawer to track user interaction. The `onDrag` callback provides the drag percentage, while `onRelease` indicates whether the drawer was released in an open or closed state. This is useful for implementing custom animations or logic based on drag gestures. ```tsx import { useState } from 'react'; import { Drawer } from 'vaul'; function DragCallbacksDrawer() { const [dragPercentage, setDragPercentage] = useState(0); const [dragStatus, setDragStatus] = useState('idle'); const handleDrag = (event: React.PointerEvent, percentage: number) => { setDragPercentage(Math.round(percentage * 100)); setDragStatus('dragging'); }; const handleRelease = (event: React.PointerEvent, open: boolean) => { setDragStatus(open ? 'released-open' : 'released-closed'); console.log('Drawer released:', { open, dragPercentage }); // Reset after animation setTimeout(() => { setDragStatus('idle'); setDragPercentage(0); }, 500); }; return (

Drag Tracking

Status: {dragStatus}

Dragged: {dragPercentage}%

Try dragging the drawer and watch the percentage change. Close threshold is set to 30%.

); } ``` -------------------------------- ### Controlled Drawer State Management in React (TSX) Source: https://context7.com/enderh3art/vaul/llms.txt Shows how to manage the open/close state of a Vaul drawer externally using React's useState hook and callbacks like onOpenChange and onClose. This allows for programmatic control over the drawer's visibility and reaction to state changes. ```tsx import { useState } from 'react'; import { Drawer } from 'vaul'; function ControlledDrawer() { const [open, setOpen] = useState(false); const handleOpenChange = (newOpen: boolean) => { console.log('Drawer state changed:', newOpen); setOpen(newOpen); }; const handleClose = () => { console.log('Drawer closed via callback'); }; return (

Controlled Drawer

Current state: {open ? 'Open' : 'Closed'}

); } ``` -------------------------------- ### Create Non-Dismissible Drawer with React Source: https://context7.com/enderh3art/vaul/llms.txt Demonstrates how to create a Vaul Drawer that cannot be closed by swiping down or clicking the overlay. It uses the `dismissible={false}` prop on `Drawer.Root` and a dedicated close button within the drawer content. This pattern is useful for forms or critical information that must be explicitly dismissed by the user. ```tsx import { useState } from 'react'; import { Drawer } from 'vaul'; function NonDismissibleDrawer() { const [open, setOpen] = useState(false); return (

Non-Dismissible Drawer

This drawer cannot be dismissed by swiping down or clicking the overlay. You must use the close button.

); } ``` -------------------------------- ### Create Non-Modal Drawer in React Source: https://context7.com/enderh3art/vaul/llms.txt Illustrates how to configure a Vaul Drawer to operate in non-modal mode using `modal={false}`. In this mode, the drawer does not block interaction with the background content, and there is no overlay. This is suitable for less intrusive UI elements or when users need to continue interacting with the underlying page while the drawer is open. ```tsx import { Drawer } from 'vaul'; function NonModalDrawer() { return (

Background Content

{/* No overlay in non-modal mode */}

Non-Modal Drawer

This drawer allows interaction with background content. There's no overlay, and clicking outside won't close it.

); } ``` -------------------------------- ### Add Background Scaling Effect to Vaul Drawer in React Source: https://context7.com/enderh3art/vaul/llms.txt Implements a visual effect where the background content scales down when the drawer opens, mimicking iOS sheet behavior. This utilizes the `shouldScaleBackground` and `setBackgroundColorOnScale` props of the Drawer.Root. It requires the 'vaul' library. ```tsx import { Drawer } from 'vaul'; function ScaledBackgroundDrawer() { return (

Page Content

This content will scale down when the drawer opens.

Scaled Background

Notice how the background content scales and transforms when this drawer opens, creating a depth effect similar to iOS sheets.

); } ``` -------------------------------- ### Restrict Vaul Drawer Dragging to Handle in React Source: https://context7.com/enderh3art/vaul/llms.txt Configures a Vaul drawer so that it can only be dragged using a specific handle element, preventing the content area from initiating a drag. This is achieved using the `handleOnly` prop on Drawer.Root. It requires the 'vaul' library. ```tsx import { Drawer } from 'vaul'; function HandleOnlyDrawer() { return (

{/* Only this handle can drag the drawer */} Handle-Only Dragging

This drawer can only be dragged via the handle above. The content area is not draggable.