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:

Flexible Smooth Bottom Modal Sheet Component For React

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

You Might Be Interested In:

Add Comment