Drawer

Drawer based on Reakit's dialog with a really nice theme 💅

Install and import #

Usage #

The most basic drawer needs useDrawerState(), <Drawer.Trigger /> and <Drawer />.

Backdrop #

You can wrap <Drawer /> with <Drawer.Backdrop /> to add a backdrop. It corresponds to Reakit Dialog's Backdrop with custom styling.

Layout #

We provide basic layout components for your drawer: <Drawer.Close />, <Drawer.Title />, <Drawer.Content /> and <Drawer.Footer />. They're all optionnal

Placement #

By default the placement of the drawer will be on the right but you can set it to top, bottom, or left.

Placement

Size #

By default the size of the drawer will be lg which is set in the theme. We provide 3 different sizes that will adapt according to the position of the Drawer. You can also set a custom size if needed.

Size
Placement

Styling #

All the elements can be styled as you see fit, by extending drawer's theme or directly with styled props.

useDrawerState #

We use useDialogState from Reakit Dialog for the state of the drawer with the animated flag set to true by default.

Pass options to useDrawerState :

  • visible: e.g. const modal = useDrawerState({ visible: true })

And the hook returns (among other things):

  • visible : whether the drawer is currently visible
  • hide : a function to hide the drawer

Properties #

Drawer #

No propTypes specified

Drawer.Backdrop #

No propTypes specified

Dependencies #

Peer dependencies #