wix-incubator/react-popup-manager

Manage react popups, Modals, Lightboxes, Notifications

react-popup-manager ·

Manage react popups, Modals, Lightboxes, Notifications etc.

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 isOpen 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

The Old Way	The react-popup-manager Way

How

install

$ npm i --save react-popup-manager
$ yarn add 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 ReactDOM from "react-dom";
import { PopupProvider } from "react-popup-manager";
import { Main } from "./Main";

ReactDOM.render(
  <PopupProvider>
    <Main />
  </PopupProvider>,
  document.getElementById("root")
);

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 = () => {
    // open MyModal with it's needed `props` and an `onClose` callback function
    popupManager.open(MyModal, {
      title: 'my modal',
      onClose: (...params) => console.log('modal has closed with:', ...params), // modal has closed with: param param2 param3
    }); 
  }
  return (
      <div>
        <button onClick={() => openModal()}>
          open modal
        </button>
      </div>
  );
}

The modal Component will receive the sent props and will also have isOpen and onClose added by the popupManager.
onClose will trigger the popupManager to close the modal

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

export const MyModal = ({title, isOpen, onClose}) => {

    const close = () => {
        // `onClose` will close the modal and will call the callback defined in main.jsx
        onClose('param', 'param2', 'param3');
    }

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

The library is agnostic to any popup library you decide to use.
~ in this example we used react-modal

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

withPopups(managerName)

An HOC that adds popupManager to the component's props.
Can be used as an alternative to usePopupManager.

parameters:

• managerName (optional) - set manager name that will be added to props.

~ Default : uses popupManager

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(componentClass, popupProps) - opens popup. render's popup component

• componentClass - 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 - sets isOpen to false. Doesn't call onClose callback
  • unmount - removes popup instance

closeAll() - closes all open popups.