React Sheet Modal

An authentic modal sheet for ReactJs - Bringing the ()iOS experience to the web

⭐️ Easy integration	🛠️ Configurable	⚡️ Zero Dependencies

A ReactJs library for displaying a sheet modal - A type of modal that is displayed from the bottom of the viewport and helps the user perform a scoped task that is closely related to their current context.

Motivation

React Sheet Modal was created to give web users an equal experience to that of Apples' modal sheet, while also being easy to implement and use. The library uses vanilla CSS. And since the transitions for the sheet are fully calculated through javascript, it does not require any additional npm-dependencies do be added.

If you find the component useful, consider starring the project on GitHub!

How to install

Install the component using npm:

npm i react-sheet-modal

How to use
Properties
Styling

🧱 How to use

The Sheet.tsx component is similarily structured to its SwiftUI counterpart and is easily implemented with ones project.

In its simplest form the sheet takes in two properties. isPresented - A boolean, whether the sheet is displayed. And onClose - A callback function for closing the sheet. To these properties you pass a state variable that sets whether to show or hide the sheet.

const [isSheetOpen, setIsSheetOpen] = useState(false);

function openSheet() {
  setIsSheetOpen(true);
}
function closeSheet() {
  setIsSheetOpen(false);
}

return (
  <div>
    <button onClick={openSheet}>Open sheet</button>
    <Sheet isPresented={isSheetOpen} onClose={closeSheet} />
  </div>
);

Content

The sheet is displayed as a blank modal. What content is displayed inside of it is fully in your controll.

For example, to add a simple button that closes the sheet could look like the following:

const [isSheetOpen, setIsSheetOpen] = useState(false);

function openSheet() {
  setIsSheetOpen(true);
}
function closeSheet() {
  setIsSheetOpen(false);
}

return (
  <div>
    <button onClick={openSheet}>Open sheet</button>
    <Sheet isPresented={isSheetOpen} onClose={closeSheet}>
      <button type="button" onClick={() => setIsSheetOpen(false)}>
        Close me
      </button>
    </Sheet>
  </div>
);

🎛️ Properties

Use the available properties to customize the look and behaviour of the sheet.

`isPresented` `(required)`

`boolean`

Determines whether the sheet is displayed

`onClose` `(required)`

`() => void`

Callback function that is called when the sheet is closed

`snapPoints`

`SnapPoint[]`

Sets the available snapping points for the sheet

`showGrabber`

`boolean`

Determines whether to show a grabber at the top of the sheet

`scaleBackdrop`

`string | boolean`

When included, adds the effect of scaling the backdrop when the sheet is open

`backgroundInteractionEnabled`

`boolean`

If true, allows interaction with the background when the sheet is open

`preventCloseOnResize`

`boolean`

If true, prevents the sheet from closing while the sheet is resized

`className`

`string`

Add a custom styling class to the sheet

`style`

`CSSProperties`

Overwrite the style attribute of the sheet

`children`

`ReactNode`

Content to be displayed inside the sheet.

🖌️ Styling

The sheet has a default styling that is designed to mimic the look and feel of the Apple (IOS) modal sheet and follows the Human Interface Guidlines. To overwrite this design, you can update the css variables or add your own className or style attributes to the sheet.

CSS Variables

Use the CSS variables to change specific style attributes of the sheet.

In your own css or stylesheet include any of the below variables as a :root style variable.

:root {
  --sheet-inner-padding: 1rem;
  --sheet-base-border-radius: 1.25rem;
  --sheet-base-bg-color: rgb(247, 247, 247);
}

💡 The values in the above code snippet are the default set values for the sheet.

Sheet padding

Overwrite the padding of the sheet.

--sheet-inner-padding: <size-unit>;

Background color

Overwrite the background color of the sheet.

--sheet-base-bg-color: <color-unit>;

Border radius

Overwrite the border radius of the sheet

--sheet-base-border-radius: <size-unit>;

Class names

Use class names to overwirte the style behaviour with your own classes.

The following css class styles the sheet pink with a larger border radius:

.my-pink-sheet {
  background-color: #ffc0cb; /* hexadecimal for pink*/
  border-radius: 24px;
}

Add the classNames prop to your sheet component:

<Sheet isPresented={isSheetOpen} onClose={closeSheet} classNames="my-pink-sheet" />

Style attribute

Use style attrutes to overwirte the style behaviour with your own style objects.

💡 Note- It is not possible to overwrite the styling for the sheet overlay with the style prop

The following css class styles the sheet pink with a larger border radius:

const myPinkSheet {
  backgroundColor: '#ffc0cb;' // hexadecimal for pink
  borderRadius: '24px';
}

Add the style prop to your sheet component with your style object:

<Sheet isPresented={isSheetOpen} onClose={closeSheet} style={myPinkSheet} />