Drawer

About #

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

Usage #

The most basic drawer needs useDrawerState(), <Drawer.Trigger />, <Drawer.Backdrop /> and <Drawer />. Please note you have to wrap your <Drawer /> with a <Drawer.Backdrop />. If you don't want this <Drawer.Backdrop /> to be visible, please provide it a backdropVisible prop set to false. Backdrop allows us to have a smooth scroll across all browsers by wrapping the Drawer. This way, the Drawer can be absolutely positioned in the fixed Backdrop wrapper.

Backdrop #

You have to wrap <Drawer /> with <Drawer.Backdrop />. It can be either visible or not, thanks to the backdropVisible prop (which is true by default). 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. If you're using <Drawer.Close /> along with <Drawer.Title />, please make sure to position <Drawer.Close /> first in your code, for styling purpose.

Placement #

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

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.

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 :

And the hook returns (among other things):

Properties #

Drawer #

Drawer.Backdrop #

Packages #

Dependencies #

Peer dependencies #