akshay-dholakiyaInstallation
npm i react-drag-bottom-sheetProps
| 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
`jsx static
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;
`