@figliolia/bottom-sheet

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.