1.0.15 • Published 1 year ago
react-drag-bottom-sheet v1.0.15
Installation
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
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;