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 {
}