Drawer
The Drawer component is a sliding panel from the screen's edge, useful for tasks or viewing details without leaving the current page.
- Preview
- Code
Installation
- npm
- yarn
- pnpm
- bun
npm i @melio-ui/drawer
If @melio-ui/react is already installed globally, you can skip this step.
Import
- Individual
- Global
import {DrawerRoot,DrawerTrigger,DrawerPortal,DrawerBackdrop,DrawerContent,DrawerClose,} from '@melio-ui/drawer';
- DrawerRoot: All parts of the drawer are included.
- DrawerTrigger: Used to activate or open the Drawer component.
- DrawerPortal: Portal the overlay and content portion into the body.
- DrawerBackdrop: A layer that covers the inactive portion of the view when a dialog box is opened.
- DrawerContent: Includes the content that will be displayed in the open dialog box.
- DrawerClose: The button that closes the dialog.
Another way to import
'use client';import { Drawer } from '@melio-ui/drawer';<Drawer.Root><Drawer.Trigger asChild><button type="button">Open Drawer</button></Drawer.Trigger><Drawer.Portal><Drawer.Backdrop /><Drawer.Content><Drawer.Close asChild><button type="button" /></Drawer.Close><div>Drawer Content</div></Drawer.Content></Drawer.Portal></Drawer.Root>;
'use client' must be used when rendering on the server side.
API Reference
DrawerRoot
All parts of the drawer are included.
Prop | Type | Default | Description |
---|---|---|---|
open | boolean | - | Sets whether the drawer is open or closed. |
defaultOpen | boolean | - | When first rendered, the drawer is in an opened state. Use when there is no need to control the opened state. |
placement | "top" | "bottom" | "right" | "left" | "right" | This is the position where the drawer opens. |
onOpenChange | (open: boolean) => void | - | This is an event handler that is triggered when the open state of the drawer changes. |
DrawerTrigger
Used to activate or open the Drawer component.
Prop | Type | Default | Description |
---|---|---|---|
asChild | boolean | - | Changes the default rendering element passed as a child, merging its props and behavior. |
Data attribute | Values |
---|---|
[data-state] | "open" | "closed" |
DrawerPortal
Portal the overlay and content portion into the body.
Prop | Type | Default | Description |
---|---|---|---|
container | HTMLElement | (() => HTMLElement) | document.body | Specifies the container element to which the content should be portaled. |
DrawerBackdrop
A layer that covers the inactive portion of the view when a dialog box is opened.
Prop | Type | Default | Description |
---|---|---|---|
preventCloseOnClick | boolean | - | Prevents closing when clicking on backdrop. |
DrawerContent
Includes the content that will be displayed in the open dialog box.
Prop | Type | Default | Description |
---|---|---|---|
destroyOnClose | boolean | true | Used to ensure that the DOM is removed when closed. |
forceMount | boolean | - | Used to ensure that a component is always rendered in the DOM, regardless of its visibility or whether it's conditionally displayed. |
closeOnEsc | boolean | true | Determines whether or not to close when the ESC key is pressed. |
Data attribute | Values |
---|---|
[data-state] | "open" | "closed" |
[data-placement] | "top" | "bottom" | "right" | "left" |
DrawerClose
The button that closes the dialog.
Prop | Type | Default | Description |
---|---|---|---|
asChild | boolean | - | Changes the default rendering element passed as a child, merging its props and behavior. |
Examples
Placement
function DrawerPlacement() { return ( <DrawerRoot placement="left"> <DrawerTrigger asChild> <button type="button" style={{ border: '1px solid #2e68da', padding: '5px 10px', borderRadius: 5, }} > Left </button> </DrawerTrigger> <DrawerPortal> <DrawerBackdrop /> <DrawerContent> <Title>Title</Title> <DrawerClose asChild> <CloseButton /> </DrawerClose> </DrawerContent> </DrawerPortal> </DrawerRoot> ); } render(<DrawerPlacement />); function Title(props) { const { children } = props; return ( <div style={{ padding: '1rem 1.5rem', borderBottom: '0.0625rem solid #cccccc', flex: '0 1 auto' }} > {children} </div> ); } function CloseButton(props) { return ( <button {...props} style={{ position: 'absolute', right: 0, top: 0, padding: '0.875rem', cursor: 'pointer', }} > <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" > <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor" /> </svg> </button> ); }
Custom Size
<DrawerRoot> <DrawerTrigger asChild> <button type="button" style={{ border: '1px solid #2e68da', padding: '5px 10px', borderRadius: 5, }} > 60% </button> </DrawerTrigger> <DrawerPortal> <DrawerBackdrop /> <DrawerContent style={{ width: '60%' }}> <DrawerClose asChild> <button style={{ position: 'absolute', right: 0, top: 0, padding: '0.875rem', cursor: 'pointer', }} > <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" > <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor" /> </svg> </button> </DrawerClose> </DrawerContent> </DrawerPortal> </DrawerRoot>
Prevent closing when clicking on the backdrop.
<DrawerRoot> <DrawerTrigger asChild> <button type="button" style={{ border: '1px solid #2e68da', padding: '5px 10px', borderRadius: 5, }} > preventCloseOnClick </button> </DrawerTrigger> <DrawerPortal> <DrawerBackdrop preventCloseOnClick /> <DrawerContent> <DrawerClose asChild> <button style={{ position: 'absolute', right: 0, top: 0, padding: '0.875rem', cursor: 'pointer', }} > <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" > <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor" /> </svg> </button> </DrawerClose> </DrawerContent> </DrawerPortal> </DrawerRoot>