React Modal Sheet component displayed on a large screen with a cat watching

Sheet Symphony: Orchestrating Bottom Sheets with React Modal Sheet

The Gray Cat
The Gray Cat

React Modal Sheet is a powerful library that brings flexible bottom sheet components to your React applications. With its intuitive API and customizable features, you can create smooth, interactive UI elements that enhance user experience and streamline your app’s interface.

Unveiling React Modal Sheet

React Modal Sheet is designed to provide developers with a versatile solution for implementing bottom sheets in their React projects. Bottom sheets are UI components that slide up from the bottom of the screen, offering additional content or functionality without navigating away from the current view. This library makes it easy to incorporate such elements into your application, with a focus on flexibility and customization.

Key Features

React Modal Sheet comes packed with features that make it stand out:

  • Compound Component Pattern: The library follows this pattern, allowing for highly customizable and flexible sheet compositions.
  • Gesture Handling: Smooth drag gestures are supported out of the box, powered by Framer Motion.
  • Snap Points: Define multiple snap points for your sheet to create multi-stage interactions.
  • Accessibility: While not built-in, the library’s design allows for easy integration of accessibility features.
  • Customization: Extensive styling options let you tailor the sheet’s appearance to your needs.

Getting Started

To begin using React Modal Sheet in your project, you’ll first need to install it along with its peer dependency, Framer Motion.

npm install react-modal-sheet framer-motion

Once installed, you can import and use the Sheet component in your React application:

import { Sheet } from 'react-modal-sheet';
import { useState } from 'react';

function Example() {
  const [isOpen, setOpen] = 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>
    </>
  );
}

This basic example demonstrates how to create a simple bottom sheet that can be opened and closed with a button click.

Advanced Usage

Snap Points

React Modal Sheet allows you to define snap points, which are positions where the sheet can rest. This feature is particularly useful for creating multi-stage interactions.

import { Sheet, SheetRef } from 'react-modal-sheet';
import { useState, useRef } from 'react';

function SnapPointsExample() {
  const [isOpen, setOpen] = useState(false);
  const ref = useRef<SheetRef>();
  const snapTo = (i: number) => ref.current?.snapTo(i);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open sheet</button>

      <Sheet
        ref={ref}
        isOpen={isOpen}
        onClose={() => setOpen(false)}
        snapPoints={[600, 400, 100, 0]}
        initialSnap={1}
      >
        <Sheet.Container>
          <Sheet.Content>
            <button onClick={() => snapTo(0)}>Snap to 600px</button>
            <button onClick={() => snapTo(1)}>Snap to 400px</button>
            <button onClick={() => snapTo(2)}>Snap to 100px</button>
            <button onClick={() => snapTo(3)}>Close</button>
          </Sheet.Content>
        </Sheet.Container>
      </Sheet>
    </>
  );
}

In this example, the sheet can snap to four different positions, and buttons are provided to trigger these snap points.

Content-Based Height

React Modal Sheet also supports content-based height, allowing the sheet to grow based on its content up to a maximum height.

function ContentHeightExample() {
  const [isOpen, setOpen] = useState(false);

  return (
    <Sheet
      isOpen={isOpen}
      onClose={() => setOpen(false)}
      detent="content-height"
    >
      <Sheet.Container>
        <Sheet.Content>
          <Sheet.Scroller>
            <div style={{ height: 200 }}>Some content</div>
          </Sheet.Scroller>
        </Sheet.Content>
      </Sheet.Container>
    </Sheet>
  );
}

This feature is particularly useful when you want the sheet to adapt to its content dynamically.

Customization

React Modal Sheet provides various ways to customize the appearance and behavior of your bottom sheets. You can override default styles using CSS classes or create entirely custom headers.

import { Sheet } from 'react-modal-sheet';
import { styled } from 'styled-components';

const CustomSheet = styled(Sheet)`
  .react-modal-sheet-backdrop {
    /* custom backdrop styles */
  }
  .react-modal-sheet-container {
    /* custom container styles */
  }
  .react-modal-sheet-header {
    /* custom header styles */
  }
  .react-modal-sheet-drag-indicator {
    /* custom drag indicator styles */
  }
  .react-modal-sheet-content {
    /* custom content styles */
  }
`;

function CustomExample() {
  return (
    <CustomSheet isOpen={isOpen} onClose={() => setOpen(false)}>
      <Sheet.Container>
        <Sheet.Header>
          <YourCustomSheetHeader />
        </Sheet.Header>
        <Sheet.Content>{/* ... */}</Sheet.Content>
      </Sheet.Container>
      <Sheet.Backdrop />
    </CustomSheet>
  );
}

This level of customization allows you to seamlessly integrate the bottom sheet with your application’s design language.

Conclusion

React Modal Sheet offers a powerful and flexible solution for implementing bottom sheets in your React applications. Its compound component pattern, gesture handling, and customization options make it a valuable tool for creating interactive and engaging user interfaces.

By leveraging React Modal Sheet, you can enhance your application’s UX with smooth, animated bottom sheets that provide additional content or functionality without disrupting the main view. Whether you’re building a mobile-first web app or looking to add more interactive elements to your desktop site, React Modal Sheet provides the tools you need to create polished, professional UI components.

For more insights on enhancing your React applications with interactive components, check out our articles on Mastering React Modals with react-modal and Popping Up with React Tiny Popover. These complementary libraries can further expand your UI toolkit and help you create even more engaging user experiences.

Comments