@domotz/react-popup-manager
TypeScript icon, indicating that this package has built-in type declarations

3.2.5 • Public • Published

react-popup-manager · GitHub license npm version

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.

Package Sidebar

Install

npm i @domotz/react-popup-manager

Weekly Downloads

69

Version

3.2.5

License

MIT

Unpacked Size

240 kB

Total Files

25

Last publish

Collaborators

  • domotz_apagiaro
  • a.azzara
  • massimiliano78
  • iacopo_domotz
  • atondo