Drawer
A drawer is a panel that slides in from the side of the screen.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Drawer, DrawerHeader, DrawerTitle, DrawerBody } from '@wolf-rayet/react';Drawer props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen * | boolean | None | Whether the drawer is shown. You manage the open state. |
| onClose * | () => void | None | Called when someone selects the close button, presses Escape or clicks outside. |
| children * | ReactNode | None | Header and body, in that order. |
| width | 'narrow' | 'medium' | 'wide' | 'full' | 'narrow' | Narrow for a detail panel. Wider for content that needs more room. Full for a task too big for a panel. |
| label * | string | None | Names the drawer for assistive technology, usually the same words as the title. |
DrawerHeader props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | Header and body, in that order. |
DrawerTitle props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | Header and body, in that order. |
DrawerBody props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | Header and body, in that order. |
Accessibility
What the component does for you, and what it needs from you.
- The drawer takes focus when it opens. When it closes, focus returns to the element that opened it.
- Escape and a click on the blanket both close it, through the same onClose.
- Screen readers announce the label when focus moves into the drawer.
- A drawer has no URL, so anything people need to come back to should also have its own page.