Skip to content

fpellicero/react-bottom-drawer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 {

}