@figliolia/bottom-sheet v1.6.1

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

npm i @figliolia/bottom-sheet
# or
yarn add @figliolia/bottom-sheet

Basic Usage

To create a bottom sheet, wrap your content in <BottomSheet/> tags and specify your options:

import { BottomSheet } from "@figliolia/bottom-sheet";

export const BottomSheetForm = ({ open, closeFN }: {
  open: boolean;
  closeFN: () => void;
}) => {
  return (
    <BottomSheet 
      dim 
      notch 
      open={open}
      close={closeFN}
      className="my-bottom-sheet">
      <form>
        <input type="text" placeholder="Enter a value:"/>
        <input type="submit">Submit</button>
      </form>
    </BottomSheet>
  );
}

You've now created a bottom sheet that'll morph into a modal on larger devices!

Options

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

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 (
    <BottomSheet 
      dim 
      notch 
      open={open}
      close={closeFN}
      aria-labelledby={title}
      aria-describedby={description}
      className="my-bottom-sheet">
      <h2 id={title}>Your title / label here</h2>
      <p id={description}>Your description here</p>
    </BottomSheet>
  );
}

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;

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 support table.