React Bottom Drawer

This package contains a single React component that allows you to build mobile-friendly dialogs that slide from the bottom.

While it works on desktop, it is designed as a mobile interaction.

It has 100% typescript support, as it's written in typescript.

Usage

Using it is pretty straight-forward, just import the component, and place the content as it's children.

import React from "react";
import Drawer from "react-bottom-drawer";

function DemoDrawer() {
  const [isVisible, setIsVisible] = React.useState(false);

  const onClose = React.useCallback(() => {
    setIsVisible(false);
  }, []);

  return (
    <Drawer
      isVisible={isVisible}
      onClose={onClose}
    >
      { ... }
    </Drawer>
  )
}

Props

Prop	Type	Required?	Default Value	Description
isVisible	boolean	Required	-	Shows or hides the modal
onClose	function	Required	-	Invoked when the drawer should be close. You shoud be setting isVisible to false in this callback
mountOnEnter	boolean	Optional	true	If true, the children won't be mounted until isVisible is true. If false, we will mount the children, and hide them via CSS.
unmountOnExit	boolean	Optional	true	If true, we will unmount the children once isVisible goes back to false. If false, we won't unmount the children after mounting them.
duration	number	Optional	250	Duration of the enter / exit animation in ms
hideScrollbars	boolean	Optional	false	If true, scrollbars won't appear even if content is scrollable
className	string	Optional	undefined	For theming. If provided, it will generate classNames for all divs based on the provided value

Examples

Click here to see some examples on codesandbox.

Theming

You can provide custom styles by providing a custom className prop. You can use them to add styling to the drawer. If you need to override some values, you probably need to use !important.

These are all the available classNames:

.drawer {

}

.drawer__backdrop {

}

.drawer__handle-wrapper {

}

.drawer__handle {

}

.drawer__content {

}