Drawer

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

Install and import #

yarn add @welcome-ui/drawer @xstyled/styled-components @xstyled/system react react-dom styled-components

import { Drawer } from '@welcome-ui/drawer'

Usage #

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

Open Drawer
Show editor

Backdrop #

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

Open Drawer
Show editor

Layout #

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

Open Drawer
Show editor

Placement #

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

Placement
Top
Right
Bottom
Left
Open Drawer
Show editor

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
sm
md
lg
50% (width or height depending on the placement
Placement
Top
Right
Bottom
Left
Open Drawer
Show editor

Styling #

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

Open Drawer
Show editor

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 #

Drawer.Backdrop #

Dependencies #

• - @welcome-ui/box
  ^3.0.0
• - @welcome-ui/close-button
  ^3.12.0
• - @welcome-ui/text
  ^3.1.1
• - @welcome-ui/utils
  ^3.4.3
• - 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