React-Modal-Pro

React-Modal-Pro is a versatile and lightweight library for managing modals in React applications. It offers seamless support for dialogs, sidebars, and sheets, giving you full control over their behavior and appearance. With native-like navigation integration, modals can close when navigating back in history, without actually reverting to the previous page—providing a smooth, app-like user experience.

Key Features:

• Effortlessly manage multiple modals.
• Native-like modal behavior with history-based closing.
• Swipe-to-open and swipe-to-close functionality for sidebars and sheets.
• Simple yet powerful API for fine-tuned control.

With React-Modal-Pro, creating professional, responsive, and intuitive modals has never been easier.

Installation

To install React-Modal-Pro, you can use npm or yarn:

# Using npm
$ npm install --save react-modal-pro

# Using yarn
$ yarn add react-modal-pro

Example: Building Modals with React-Modal-Pro

Below is a simple example demonstrating how to use React-Modal-Pro to create a bottom sheet, a sidebar, and a center dialog, each controlled by unique keys and customizable props.

Highlights:

1. Unique Modal Keys:
   Each modal uses a unique modalKey to ensure smooth and independent functionality, even when managing multiple modals simultaneously.

2. Global Modal Control:
   Using the useModalController hook, you can programmatically control any modal, allowing you to close (or open) it from anywhere in your app.

3. Customizable Props:
   Tailor your modals with a variety of props for direction, triggers, gestures, and more. (Details on all available props are explained later!)

Code Example:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ProModalProvider, ProSheet, Sidebar, useModalController, Dialog } from 'react-modal-pro';

function App() {
  return (
    <div>
      <BottomSheet />
      <SidebarLeft />
      <CenterDialog />
    </div>
  );
}

function BottomSheet() {
  return (
    <ProSheet
      modalKey="bottom-sheet"
      direction="bottom"
      TriggerElement={<button>open bottom sheet</button>}
    >
      <BottomSheetContent />
    </ProSheet>
  );
}

function BottomSheetContent() {
  const { handleCloseModal } = useModalController("bottom-sheet");
  return (
    <button onClick={handleCloseModal}>
      click to close bottom sheet with me!
    </button>
  );
}

function SidebarLeft() {
  return (
    <Sidebar
      modalKey="sidebar-left"
      direction="left"
      TriggerElement={<button>open sidebar left</button>}
    >
      Hey, This is sidebar-left content!
    </Sidebar>
  );
}

function CenterDialog() {
  return (
    <Dialog
      modalKey="dialog"
      TriggerElement={<button>open dialog</button>}
    >
      Hey, This is dialog content!
    </Dialog>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ProModalProvider>
      <App />
    </ProModalProvider>
  </React.StrictMode>
);

Key Takeaways

• Unique Keys: Assign a unique modalKey (e.g., 'bottom-sheet', 'sidebar-left') for independent modal control.
• Dynamic Control: Use the useModalController hook to dynamically manage modals, such as closing a modal from within its content using handleCloseModal.
• Customizable Props: Configure modals with props for directions, gestures, animations, and more.

Props Reference

ProModalProvider Props

| Prop | Type | Default | Description | |--------------------------|----------------|-------------|---------------------------------------------------------------------------------| | defaultCanDismiss | boolean | true | Allows modals to be dismissed by clicking the backdrop or swiping. | | defaultOpenDuration | number | 400 | Duration (in ms) for opening animations. | | defaultCloseDuration | number | 300 | Duration (in ms) for closing animations. | | defaultSheetClassName | string | "" | Default class name for the modal sheet. | | defaultBackdropClassName | string | "" | Default class name for the modal backdrop. |

Shared Modal Props (Dialog, Sidebar, ProSheet)

| Prop | Type | Default | Required | Description | |-----------------------|-----------------|-------------|--------------|---------------------------------------------------------------------------------| | modalKey | string | - | Yes | Unique key for identifying the modal. | | children | ReactNode | - | Yes | Content displayed inside the modal. | | TriggerElement | ReactNode | - | Yes | Element that triggers modal opening. | | canDismiss | boolean | true | No | Allows dismissal by backdrop click. | | closeCb | () => void | undefined | No | Callback executed when the modal closes. | | closeDuration | number | 300 | No | Duration (in ms) for closing animations. | | openDuration | number | 400 | No | Duration (in ms) for opening animations. | | backdropClassName | string | "" | No | Custom class name for the backdrop. | | sheetClassName | string | "" | No | Custom class name for the modal container. |

Component-Specific Props

Dialog

| Prop | Type | Default | Required | Description | |----------------------|----------------|-------------|--------------|------------------| | (inherits shared props) | - | - | - | - |

Sidebar

| Prop | Type | Default | Required | Description | |-----------------------|----------------|-------------|--------------|------------------------------------------------| | direction | left right | - | Yes | Direction the sidebar opens (left or right). | | swipeToOpen | boolean | false | No | Enables swipe-to-open functionality. | | swipeToClose | boolean | false | No | Enables swipe-to-close functionality. | | swipeThreshold | number | undefined | No | Threshold for swipe gestures. |

ProSheet

| Prop | Type | Default | Required | Description | |-----------------------|----------------|-------------|--------------|------------------------------------------------| | direction | bottom top | - | Yes | Direction the sheet opens (bottom or top). | | swipeToOpen | boolean | false | No | Enables swipe-to-open functionality. | | swipeToClose | boolean | false | No | Enables swipe-to-close functionality. | | swipeThreshold | number | undefined | No | Threshold for swipe gestures. |

Demo

Try the live demo on Codesandbox:
https://codesandbox.io/p/devbox/pedantic-lumiere-njcdm6