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: 4 months 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 (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-20T16:14:12.000Z (9 months ago)
- Last Synced: 2025-08-20T16:16:25.329Z (9 months ago)
- Topics: bottomsheet, modal, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@figliolia/bottom-sheet
- Size: 1.78 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 |
| `focusableContainer` | `true` | Whether or not the content container of the bottom sheet can be focused. You can disable this when the content inside of your bottom sheet is interactive |
## Accessibility
By default the bottom sheet uses the `role='dialog'` with `aria-modal='true'`. For bottom sheets that should announce content you can replace the `role` with `alertdialog`.
Bottom sheets that behave like dialogs should have corresponding aria-attributes that identify the label/title as well as descriptive content inside. To accomplish this you can use a combination of `aria-label`, `aria-labelledby`, `aria-description`, or `aria-describedby`
```tsx
import { useId } from 'react';
import { BottomSheet } from "@figliolia/bottom-sheet";
export const BottomSheetForm = ({ open, closeFN }: {
open: boolean;
closeFN: () => void;
}) => {
const title = useId();
const description = useId();
return (
Your title / label here
Your description here
);
}
```
## Styling Tips
There are CSS custom properties that can be accessed to easily theme your bottom sheets
| 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}` |
| `--border-radius` | `1em` or `0.4em` when screen width is above `670px` | The amount of border radius applied to the bottom sheet |
| `--horizontal-padding` | `1em` or `1.5em` when screen width is above `670px` | The amount of horizontal padding applied to the bottom sheet |
| `--notch-width` | `4em` | The width of the top notch when `notch={true}` |
| `--notch-height` | `0.25em` | The height of the top notch when `notch={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.