Flexible Smooth Bottom Modal Sheet Component For React

Description:

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

Add Comment