Drawer

An type of modal dialog that extends the Modal Component to explicity provide a few pre-defined props to easily style and implement flyout drawers.

This component is great for easily adding complex elements such as comment windows, e-commerce cart previews and management, detail panes for tabular data, etc...

In the above example, you can see that it only takes a few animation declarations to achieve flyouts.

Note: It's important to note that the <Drawer /> component sits as an interface on top of the <Modal /> component and functions exactly the same. You can create a modal drawer without the explicit use of the <Drawer /> component however, it will take a little more effort.

Usage

Since the Drawer extends the Modal component, it inherits all of the same properties that the Modal component does. Howerever, the <Drawer /> component adds another prop called dxOrientation which adds a few classes to make it easy to style.

In addition, you can use the dxSize prop of the modal to size the drawer. Ultmiatley, the drawer is nothing more than a small wrapper around the Modal component to make the DX a little better.

Below is an example that doesn't apply any styling at all. Try to notice the similarities to the a default Modal Dialog

You'll notice above that the drawer, when opened, is the default style of a Modal Dialog.

Installation

# yarn
yarn add @buttery/components

# npm
npm install @buttery/components

Basic Example

The below example is what you would most likely see in the wild. It includes a modal header, scrollable body, and a footer that contains a close and action button. It has minimal styles but attempts to show you what you can do with those styles.

Unlike other Headless UI libraries, Buttery Components only exports hooks and basic components you need to use relatively complex functionality. You might think that there would be a <ModalHeader /> , <ModalBody />, and <ModalFooter /> components but that offers too much opinion on how those components should be implemented and also makes an uncessary complex abstraction to interface when consuming the components.

Instead, it's up to the user to style those internal components in the modal however they see fit.

Styling

CSS-in-JS

Style Objects

Examples

Barebones

Animation

Different sizes

Orientation

The orientation is what ultimately dictates what direction the drawer will open up and then subsuquntly close. The dxOrientation is the class that is added to the <Modal /> component and is what you'll be use to style.

Slide right

A drawer that slides from the left to the right.

Slide left

A drawer that slides from the right to the left.

Slide-up

A drawer that slides up from the bottom.

Slide-down

A drawer that slides down from the top.

Stacking

Code splitting drawer content

Styling the :backdrop

Setting internal state before opening

APIs

<Drawer />

useDrawer