WUI logo

Drawer

Allows user to open a modal with a special style.

version

5.0.0-alpha.16

install

yarn add @welcome-ui/drawer

usage

import { Drawer } from '@welcome-ui/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 :

  • 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 #
NameType(s)DefaultRequired
placement
"top"
"right"
"bottom"
"left"
right
size
string
lg
Drawer.Backdrop #
NameType(s)DefaultRequired
hideOnClickOutside
Boolean
true
backdropVisible
Boolean
true

Packages #

Dependencies #
Peer dependencies #

Previous

Toast

Next

Modal