Simple Modal Controller For React Apps

Description:

This is a simple and convenient modal controller that provides a simple API for creating, opening, closing, and customizing modals in your React apps.

Features

• 🛠️ Easy Installation: Just a single npm command to set up the library.
• 🎛️ Simple API: A clean and intuitive API for opening and closing modals.
• 📦 Asynchronous Modals: Support for asynchronous operations within modal dialogs.
• 🔄 Nesting Modals: Ability to nest modals for complex user interactions.
• ⚙️ Customizable: Offers flexibility in modal content and appearance.

Use Cases

User Confirmation Dialogs: Implement modals to confirm user actions, such as deletions or submissions.

• Example: A delete button that opens a confirmation modal asking the user to confirm their choice.

Form Inputs: Use modals to capture user inputs in a dedicated space without navigating away from the page.

• Example: A sign-up form displayed in a modal for a streamlined user experience.

Information Display: Present additional information or details without cluttering the main interface.

• Example: Clicking on a “details” button can open a modal with more information about a product.

Notifications and Alerts: Show alerts or notifications to the user in an unobtrusive manner.

• Example: A success message after a form submission displayed in a modal.

Multi-step Processes: Facilitate multi-step user processes by using modals for each step.

• Example: A modal guiding users through a multi-step onboarding process.

Installation

1. Run the following command in your terminal:

   npm install react-simple-modal-controller

2. Wrap your application’s top-level component with the ModalProvider:

   import { ModalProvider } from "react-simple-modal-controller";
   const App = () => {
     return <ModalProvider>...</ModalProvider>;
   };

Usage

Basic Modal

Create a basic modal.

import { modal } from "react-simple-modal-controller";
const openModal = () => {
  modal.open(ModalComponent, { title: "Test Modal" });
};
const Page = () => {
  return <button onClick={openModal}>Open Modal</button>;
};
const ModalComponent = ({ title }) => {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <button onClick={modal.close}>OK</button>
      <button onClick={modal.close}>Cancel</button>
      <button onClick={openModal}>Open Nested Modal</button>
    </div>
  );
};

Asynchronous Modal

const openAsyncModal = async () => {
  try {
    const isOk = await modal.openAsync(AsyncModalComponent, {
      userId: 123,
    });
    if (isOk) {
      // Handle positive response
    } else {
      // Handle cancellation
    }
  } catch (error) {
    // Handle error
  }
};
const AsyncModalComponent = ({ resolve, userId }) => {
  return (
    <div className="modal">
      <h2>Async Modal</h2>
      <button onClick={() => resolve(true)}>OK</button>
      <button onClick={() => resolve(false)}>Cancel</button>
    </div>
  );
};

FAQs

Q: Can I use multiple modals simultaneously?
A: Yes, the controller supports nested modals and multiple modal instances.

Q: Does it support custom animations?
A: You can implement custom animations using CSS or animation libraries.

Q: Is SSR supported?
A: Yes, the package works with server-side rendering frameworks.