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

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