React draggable bottom sheet

A React component with the bottom sheet experience we have for native mobile applications, but for web ✨

Demo

Installation

npm install react-draggable-bottom-sheet

Styles

The component requires its CSS styles to be imported separately. Add the following import to your application:

import "react-draggable-bottom-sheet/dist/styles.css";

Usage

import BottomSheet from "react-draggable-bottom-sheet";

const NiceComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  const close = () => setIsOpen(false);

  return (
    <BottomSheet isOpen={isOpen} close={close}>
      // your UI code here
    </BottomSheet>
  );
};

In case you want some places to not drag the bottom sheet, just put the `data-no-drag`` data attribute on the tag.

<BottomSheet isOpen={isOpen} close={close}>
  <div data-no-drag>don't drag the bottom sheet</div>
  <div>here you can drag it</div>
</BottomSheet>

Lib Development

To set up the development environment, follow these steps:

1. Install the dependencies:

   npm install

2. Start the development server:

   npm start

Testing

To test the library in a React project, follow these steps:

1. Link the library in the repository root:

   npm link

2. Link the library in your React project:

   npm link react-draggable-bottom-sheet

3. Now you can import and use the library in your React project for testing purposes.

Alternatively, you can also put the path straight to the root folder of the library if you prefer not to link:

//in your app's package.json
"react-draggable-bottom-sheet": <path-to-lib>