React draggable bottom sheet

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

Demo

Installation

``bash
npm install react-draggable-bottom-sheet
`

Styles

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

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

Usage

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

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

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

return (

// your UI code here

);
};
`

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

`javascript



`bash
npm install
`

2. Start the development server:
`bash
npm start
`

$3

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

1. Link the library in the repository root:

`bash
npm link
`

2. Link the library in your React project:

`bash
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:

`javascript
//in your app's package.json
"react-draggable-bottom-sheet":
``