Drawer

A panel which slides in from the edge of the screen. Useful to focus the user's attention on a sub-task or sub-action of the parent view.

Import#

import { Drawer, DrawerProvider } from '@volue/wave-react';

Drawer is a compound component that consists of multiple parts:

DrawerProvider: The wrapper that handles the stacking behavior of drawers, by tracking their mount/unmount.
Drawer: The wrapper that contains all the parts of a drawer and provides context for its children.
Drawer.Trigger: The button that opens the drawer.
Drawer.Portal: The portal attached to the end of document.body into which your overlay and content parts will render.
Drawer.Overlay: The dimmed overlay behind the drawer.
Drawer.Content: The container for the drawer's content.
Drawer.Header: The header of the the drawer.
Drawer.Title: The title that labels the drawer.
Drawer.Body: The wrapper that houses the drawers's main content.
Drawer.Close: The button that closes the drawer.

Examples#

Basic#

Drawer works in an uncontrolled way by default, meaning each Drawer component instance is responsible for managing its own state internally.

The Drawer.Trigger component can be instructed via as prop to render as something else. In our case we want to render it as a <Button> component.

Controlled Drawer#

You can easily make the drawer controlled, by passing your own state to isOpen prop. onIsOpenChange handler is called when the state of the drawer changes, allowing you to sync state.

Drawer with header and body#

Use Drawer.Header, Drawer.Title, Drawer.Close and Drawer.Body parts to construct drawer with a header and scrollable content.

Drawer.Title takes the title you pass in and labels the drawer with it through ARIA attributes to provide accessible experience.
Drawer.Body ensures that the body of the drawer becomes scrollable when its content overflows the available height.

Drawer with overlay#

Use Drawer.Overlay part to cover the inert part of the view when the drawer is open.

Customizable width#

Use maxWidth prop to set the maximum width of the Drawer.Content. If the viewport width is less than that, the drawer will shrink accordingly.

Drawer placement#

Use side prop to anchor Drawer.Content to the left or right edge of the screen.

Non-modal drawer#

You can configure the drawer to be non-modal, which allows the users to interact with the rest of the view.

Stacking#

To handle the stacking behaviour of drawers, you must wrap your drawers with the <DrawerProvider/>.

Accessibility features#

When the drawer opens, focus is sent into the drawer and set to the first tabbable element. Focus stays trapped within the drawer until close is requested. After closing, focus is restored back to the trigger element.
Clicking on the overlay or outside the content closes the drawer.
Pressing ESC closes the drawer.
Scrolling is blocked on the elements behind the drawer with overlay.
The drawer is portalled (via Portal utility) to the end of document.body to break it out of the source order.
Manages screen reader announcements with Drawer.Title.

API Reference#

Drawer#

Prop	Type	Default
`isOpen`	`boolean`	`false`
`defaultIsOpen`	`boolean`	No default value
`onIsOpenChange`	`function`	No default value

Drawer.Trigger#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

Drawer.Portal#

Prop	Type	Default
`onExitComplete`	`function`	`() => void`
`shouldCloseOnOutsideClick`	`boolean`	`true`
`shouldCloseOnEsc`	`boolean`	`true`

Drawer.Overlay#

Prop	Type	Default
`shouldCloseOnClick`	`boolean`	`true`

Drawer.Content#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`maxWidth`	`string \| number`	`"32rem"`
`side`	`enum`	`"right"`
`autoFocusFirst`	`boolean`	`true`
`containFocus`	`boolean`	`true`

Drawer.Header#

Prop	Type	Default
`css`	`StitchesCss`	No default value

Drawer.Title#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

Drawer.Body#

Prop	Type	Default
`css`	`StitchesCss`	No default value

Drawer.Close#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value