A zero-dependency, customizable React bottom sheet component with drag gestures, snap points, and TypeScript support
npm install zero-dependency-bottom-sheetA lightweight, customizable React bottom sheet component with zero dependencies.
``bash`
npm install zero-dependency-bottom-sheet
OR
`bash`
yarn add zero-dependency-bottom-sheet
š« Zero dependencies
š± Responsive design
šÆ Snap points for precise positioning
šØ Highly customizable styling
š Smooth animations
š² Touch-friendly drag gestures
`jsx
import React, { useState } from "react";
import "./App.css";
import { BottomSheet } from "zero-dependency-bottom-sheet";
const App: React.FC = () => {
const [isSheetVisible, setIsSheetVisible] = useState(false);
const showSheet = () => {
setIsSheetVisible(true);
};
const hideSheet = () => {
setIsSheetVisible(false);
};
return (
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores,
quisquam rem laborum adipisci voluptate deleniti officiis alias
minima perspiciatis, nostrum quibusdam! Doloribus nam obcaecati
blanditiis ducimus quasi optio aliquid aspernatur.
export default App;
`
| Prop | Type | Default | Description | Required/Optional |
| :------------------ | :---------------- | :---------- | :------------------------------------------------------------------------------------------ | :---------------- |
| isOpen | boolean | required | Controls the visibility of the bottom sheet | Required |() => void
| onClose | | required | Callback function when bottom sheet is closed | Required |React.ReactNode
| children | | required | Content to be rendered inside the bottom sheet | Required |number
| initialHeight | | 50 | Initial height of the bottom sheet in percentage (values greater than 85 will be set to 85) | Optional |string
| backdropColor | | '#000000' | Color of the backdrop overlay | Optional |number
| backdropOpacity | | 0.5 | Opacity of the backdrop overlay (0-1) | Optional |number
| borderRadius | | 20 | Border radius of the bottom sheet in pixels | Optional |string
| dragAreaColor | | '#000000' | Color of the drag handle area | Optional |string
| dragIconColor | | '#ffffff' | Color of the drag handle | Optional |boolean
| closeOnOverlayClick | | true | Close the bottom sheet when overlay is clicked | Optional |number[]
| snapPoints | | undefined | Define snapping positions during dragging (values greater than 85 will be set to 85) | Optional |string
| backgroundColor | | '#ffffff'` | Background color of the content part of the bottom sheet | Optional |
MIT Ā© Ahmad Ghorbani