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 {

}

jafin / react-bottom-drawer Goto Github PK