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
.
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
No propTypes specifiedDrawer.Backdrop
No propTypes specifiedDependencies
- - @welcome-ui/box^3.0.0
- - @welcome-ui/clear-button^3.4.0
- - @welcome-ui/text^3.1.1
- - @welcome-ui/utils^3.0.0
- - reakit^1.3.6
Peer dependencies
- - @xstyled/styled-components^2.2.3
- - @xstyled/system^2.2.3
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.2.1