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 visiblehide
: a function to hide the drawer
Properties #
Drawer #
Name | Type(s) | Default | Required |
---|---|---|---|
placement | "top" "right" "bottom" "left" | right | |
size | string | lg |
Drawer.Backdrop #
Name | Type(s) | Default | Required |
---|---|---|---|
hideOnClickOutside | Boolean | true | |
backdropVisible | Boolean | true |