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!

Browser Support

This package relies on CSS variables and nesting in order to function. For more detailed information on specific browser version support, please reference the CSS Variables and CSS Nesting support tables.