react-popup-manager ·


Manage react popups, Modals, Lightboxes, Notifications, etc. easily.

What

An agnostic react provider that lets you handle opening and closing popups separately from your 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
:-------------------------:|:-------------------------:
!image | !image

How

$3

``bash
npm install react-popup-manager


or


yarn add react-popup-manager
`

$3

#### Basic Example

`jsx
import React from 'react';
import { PopupProvider, usePopupManager } from 'react-popup-manager';
import Modal from 'any-modal-library';

// Your modal component
const MyModal = ({ isOpen, onClose }) => (



My Modal

onClose({ success: true })}>
Close


);

// Component that uses the modal
const MyComponent = () => {
const popupManager = usePopupManager();

const handleOpenModal = async () => {
const { response } = popupManager.open(MyModal);
const result = await response;
console.log(result); // { success: true }
};

return (

Open Modal

);
};

// Root component with provider
const App = () => (



);

export default App;
`

$3

`jsx
import React, { useState } from 'react';
import { usePopupManager } from 'react-popup-manager';
import Modal from 'any-modal-library';

const ConfirmationModal = ({ isOpen, onClose, message }) => (



{message}

onClose({ confirmed: true })}>Yes
onClose({ confirmed: false })}>No

);

const TodoList = () => {
const [todos, setTodos] = useState(['Task 1', 'Task 2']);
const popupManager = usePopupManager();

const handleDeleteTodo = async (index) => {
const { response } = popupManager.open(ConfirmationModal, {
message: 'Are you sure you want to delete this task?'
});

const result = await response;
if (result.confirmed) {
setTodos(todos.filter((_, i) => i !== index));
}
};

return (

{todos.map((todo, index) => (

• 
  {todo}
  handleDeleteTodo(index)}>Delete
  

))}

);
};

export default TodoList;
`

API

$3

#### usePopupManager()
Returns the popup manager instance with methods to control popups.

`jsx
const popupManager = usePopupManager();
`

$3

#### PopupProvider
A React context provider that should wrap your application.

`jsx



`

$3

#### open(componentClass, popupProps)
Opens a popup and renders the popup component.

Parameters:
* componentClass: Component to render
* popupProps (optional): Props passed to the popup component
* onClose (deprecated): Legacy callback method, use response instead
> Note: isOpen prop is not allowed and will be managed internally

Returns:
`typescript
{
close: (...args: any[]) => void; // Closes the popup
unmount: () => void; // Removes popup from DOM
response: Promise; // Resolves when popup closes
}
`

Response Resolution:
The response promise resolves with:
`jsx
// In your modal:
onClose({ data: 'success' });

// In your component:
const { response } = popupManager.open(MyModal);
const result = await response;
console.log(result); // { data: 'success' }
`

#### closeAll()
Closes all open popups.

Migration Guide

$3

#### Before (Deprecated)
`jsx
const MyComponent = () => {
const popupManager = usePopupManager();

const handleOpenModal = () => {
popupManager.open(MyModal, {
onClose: (result) => console.log(result)
});
};
};
`

#### After (Recommended)
`jsx
const MyComponent = () => {
const popupManager = usePopupManager();

const handleOpenModal = async () => {
const { response } = popupManager.open(MyModal);
const result = await response;
console.log(result);
};
};
``

License

MIT