Flexible Smooth Bottom Modal Sheet Component For React

Flexible bottom sheet component built with Framer Motion provides an easy way to have your user’s experience flowing and immersive UX. The component is built with accessibility in mind, so all users can enjoy your app.

Basic usage:

1. Install and import the modal sheet component.

# Yarn
$ yarn add react-modal-sheet framer-motion

# NPM
$ npm i react-modal-sheet framer-motion

import React from 'react';
import Sheet from 'react-modal-sheet';

2. A simple example shows how to implement a bottom sheet in your app.

function Example() {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Sheet</button>
      <Sheet isOpen={isOpen} onClose={() => setOpen(false)}>
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content>{/* Your sheet content goes here */}</Sheet.Content>
        </Sheet.Container>
        <Sheet.Backdrop />
      </Sheet>
    </>
  );
}

3. Available component props.

isOpen: boolean;
children: React.ReactNode;
onClose: () => void;
rootId?: string;
snapPoints?: number[];
initialSnap?: number; // index of snap points array
springConfig?: Parameters<typeof useSpring>[1];
disableDrag?: boolean;
// events
onOpenStart?: () => void;
onOpenEnd?: () => void;
onCloseStart?: () => void;
onCloseEnd?: () => void;
onSnap?: (index: number) => void;

Preview:

Download Details:

Author: Temzasse

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Temzasse/react-modal-sheet

License: MIT