Installation

npm i react-drag-bottom-sheet

Live Demo

Props

| Props | Description | | ------ |-----------------------------------------------------------| | children | Content displayed under the bottom sheet. | | isOpen | Specifies if the bottom sheet is open by default. | | shouldCloseOnOverlayClick | Closes the bottom sheet when clicking on the overlay. | | shouldCloseOnEsc | Closes the bottom sheet when pressing the escape key. | | overlayClassName | Adds a class name to the overlay. | | onAfterClose| Callback function executed after the bottom sheet closes. | | className | Adds a class name to the bottom sheet's parent element. | | maxHeight | Default maxHeight 50% |

Example

import React, { useRef } from 'react';
import ReactDragBottomSheet from "react-drag-bottom-sheet";

const App = () => {
    const ref =  useRef(null)
    const open = () => {
        if(ref?.current) {
            ref?.current?.open()
        }
    };

    return (
        <div className="App">
             <button onClick={open} className="open-button">
                Open Bottom Sheet
            </button>

            <ReactDragBottomSheet ref={ref}>
                <>
                    <p> Bottom sheet children</p>
                </>
            </ReactDragBottomSheet>

        </div>
    );
};
export default App;