@domotz/react-popup-manager NPM

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.