https://github.com/alexfigliolia/bottom-sheet
A responsive bottom sheet component for React Apps
https://github.com/alexfigliolia/bottom-sheet
bottomsheet modal react typescript
Last synced: about 1 month ago
JSON representation
A responsive bottom sheet component for React Apps
- Host: GitHub
- URL: https://github.com/alexfigliolia/bottom-sheet
- Owner: alexfigliolia
- Created: 2024-09-15T16:54:29.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-12-28T16:41:48.000Z (5 months ago)
- Last Synced: 2025-04-02T14:11:16.656Z (about 2 months ago)
- Topics: bottomsheet, modal, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@figliolia/bottom-sheet
- Size: 1.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bottom Sheet
A responsive bottom sheet for react applications. This bottom sheet will morph into a more standard modal appearance when the screen size is above that of a typical mobile device
## Installation
```bash
npm i @figliolia/bottom-sheet
# or
yarn add @figliolia/bottom-sheet
```
## Basic Usage
To create a bottom sheet, wrap your content in `` tags and specify your options:
```tsx
import { BottomSheet } from "@figliolia/bottom-sheet";
export const BottomSheetForm = ({ open, closeFN }: {
open: boolean;
closeFN: () => void;
}) => {
return (
Submit
);
}
```
You've now created a bottom sheet that'll morph into a modal on larger devices!
## Options
| Option | Default Value | Description |
| ------------- | ------------- | ------------- |
| `dim` | `false` | Whether to dim the background when the bottom sheet is open |
| `notch` | `false` | Whether to display an `iOS` like swipe indicator on the top of the bottom sheet when viewing on mobile devices |
| `clickOutside` | `true` | Whether clicking outside the bottom sheet will cause it to close |
| `open` | `false` | A trigger to open/close the bottom sheet |
| `close` | `undefined` | A callback to run when the bottom sheet is closed |
| `className` | `undefined` | An optional css class to apply to your bottom sheet |
| `children` | `undefined` | Content elements you wish to render inside your bottom sheet |
| `onScroll` | `undefined` | An optional callback to execute when your bottom sheet is scrolled |
## Styling Tips
There are three CSS custom properties that can be accessed to easily theme your bottom sheets
--background: #fff;
--notch-color: #d0cece;
--backdrop-color: #00000082;
| Property | Default Value | Description |
| ------------- | ------------- | ------------- |
| `--sheet-background` | `#fff` | The color of your sheet |
| `--notch-color` | `#d0cece` | The color of the notch. Visible when `notch={true}` |
| `--backdrop-color` | `#00000082` | The color of the backdrop behind the sheet. Visible when `dim={true}` |
## Browser Support
This package relies on CSS Custom Properties in order to function. For more detailed information on specific browser version support, please reference the [CSS Custom Properties](https://caniuse.com/?search=CSS%20custom%20properties) support table.