Popup Provider
Await popup results in React
This library provides a comfortable way to create popups
and await
any data from that popup close action.
Usage
See an example in CodeSandbox
// ...PopupProvider higher up in the hierarchy
// ... `const context = useContext(PopupContext)` in the component
const isSure = await openPopup<number>(
context,
(close) => {
return (
<div>
<p>Are you sure?</p>
<button onClick={() => close(true)}>Yes</button>
<button onClick={() => close(false)}>No</button>
</div>
);
},
'are_you_sure' // any unique string
);
And provide a place to render your popups
return (
<div>
{context.layers.map(({ component, resolver, id }) => (
<div key={id}>
<section>{component}</section>
<button onClick={resolver}>Close this</button>
</div>
))}
<div>
)
Where you can have a button (or background) close the popup. When closed with this method the value is null.