react-popup-manager ·

Manage react popups, Modals, Lightboxes, Notifications etc.

Now in React 18!

Main difference with the react-popup-manager v2.1.1

• The new version runs in React 18 using Functional Component as internal implementation.
• The isOpen property has been replaced by show property.
• The onClose property has been replaced by onCloseClick property.
• withPopups has been removed. Feel free to submit a PR to re-add it.
• add awaitable manager.open().onCloseClick() (check example below) to write flows easier

What

An agnostic react provider that lets you handle opening and closing popups separately from you're Component render function.

Why

• No need to manage the show state
• No need to think where the Component should be written.
• No need to have a component nested behind any inline conditional rendering
• Most important - a single paradigm for handling popups, Modals, Lightboxes, Notifications etc. etc.

An example of how using this library will simplify your code (it uses a slightly different API, please check latest version below)

The Old Way | The react-popup-manager Way :-------------------------:|:-------------------------: |

How

install

$ npm i --save @domotz/react-popup-manager
$ yarn add @domotz/react-popup-manager

example

Here is a simple example of how to use react-popup-manager Wrap the root of the app with PopupProvider

// app.jsx
import React from "react";
import { createRoot } from 'react-dom/client'
import { PopupProvider } from "react-popup-manager";
import { Main } from "./Main";

const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <PopupProvider>
    <Main />
  </PopupProvider>,
);

Use the hook usePopupManager to open a modal

// main.jsx
import React from "react";
import { usePopupManager } from "react-popup-manager";
import { MyModal } from './MyModal'

export const Main = () => {
  const popupManager = usePopupManager();
  const openModal = async () => {
    // open MyModal with it's needed `props` and an `onCloseClick` callback function
    let result = await popupManager.open(MyModal, {
      title: 'my modal',
    }).onCloseClick((...params) => 'modal has closed with:', ...params);
    console.log(result) // 'modal has closed with: param, param2, param3'
  }
  return (
      <div>
        <button onClick={() => openModal()}>
          open modal
        </button>
      </div>
  );
}

The modal Component will recieve the sent props and will also have show and onCloseClick added by the popupManager. onCloseClick will trigger the popupManager to close the modal

// MyModal.jsx
import React from 'react';
import Modal from 'react-modal';

export function MyModal({show, onCloseClick, title}) {

    const close = () => onCloseClick('param', 'param2', 'param3');

    return (
        <Modal show={show} >
          <span>{title}</span>
          <button onClick={close}> close </button>
        </Modal>
    );
}

The library is agnostic to any popup library you decide to use. ~ you only need to wrap your component in case property different than show and onCloseClick are used to handle the popup visibility.

API

PopupProvider

A react context provider, should wrap the root of the app in order to provide the popupManager. props:

• popupManager (optional) - Custom Popup Manager. can send an extended PopupManager. ~ Default : uses PopupManager

usePopupManager

React hook that returns popupManager. For class components, check the withPopups HOC below

PopupManager

A singletone service that manages the state of the popups of the app. Can be extended for specific needs (for example: showToast, openConfirmationDialog) If not extended, it has 2 methods: open(Component, popupProps) - opens popup. render's popup component

• Component - component's class or function
• popupProps (optional) - consumer's popup props and also accepts these:
  • onClose - will be called on actual popup close with arguments

  isOpen is not allowed.

• returns - object of instance of open popup
  • close - closes the popup

closeAll() - closes all open popups.