react-promiseportal

Promise portals for React

Installation

Using npm:

$ npm install react-promiseportal

Using yarn:

$ yarn add react-promiseportal

Then with a module bundler like webpack, use as you would anything else:

1// Using ES6 Modules
2import { usePromisePortal } from 'react-promiseportal';
3// using CommonJS modules
4const usePromisePortal = require('react-promiseportal').usePromisePortal;

Why?

Normally when managing a modal, or similar hierarchy agnostic elements, it is common practice to render these in the component, and control them with local boolean state.

For example:

1// App.js
2import React from 'react';
3
4function App() {
5  const [isOpen, setOpen] = React.useState(false);
6  return (
7    <>
8      <button onClick={() => setOpen(true)}>Click me to open a modal</button>
9      <SomeModalComponent open={isOpen}>
10        <button
11          onClick={() => {
12            alert('You confirmed!');
13            setOpen(false);
14          }}
15        >
16          Confirm
17        </button>
18        <button
19          onClick={() => {
20            alert('You cancelled.');
21            setOpen(false);
22          }}
23        >
24          Cancel
25        </button>
26      </SomeModalComponent>
27    </>
28  );
29}

In large components, managing several modals with different isOpen state can be confusing.
With react-promiseportal, I offer complete co-location.

Usage

At the top-level of your application, import the PromisePortalProvider module.

1// AppContext.js
2import React from 'react';
3import { PromisePortalProvider } from 'react-promiseportal';
4
5function AppContext() {
6  return (
7    <PromisePortalProvider>
8      <App />
9    </PromisePortalProvider>
10  );
11}

You can then import usePromisePortal (hook) or withPromisePortal (hoc).

1// App.js
2import React from 'react';
3import { usePromisePortal } from 'react-promiseportal';
4
5function App() {
6  const portal = usePromisePortal();
7  return (
8    <button
9      onClick={async () => {
10        const didConfirm = await portal((onConfirm, onCancel) => {
11          return (
12            <SomeModalComponent open>
13              <button onClick={onConfirm}>Confirm</button>
14              <button onClick={onCancel}>Cancel</button>
15            </SomeModalComponent>
16          );
17        });
18
19        if (didConfirm) alert('You confirmed!');
20        else alert('You cancelled.');
21      }}
22    >
23      Click me to open a modal
24    </button>
25  );
26}

Calling onConfirm with an Event or a falsy value, will resolve the promise with the value true.
If called with a truthy value, like an object, this is returned instead.

For example, if the Modal were instead a form, which returned some input for a request:

1// App.js
2import React from 'react';
3import { usePromisePortal } from 'react-promiseportal';
4
5function App() {
6  const portal = usePromisePortal();
7  return (
8    <button
9      onClick={async () => {
10        // onConfirm is called with {potatoes: true}
11        // So the promise is resolved with {potatoes: true}
12        const input = await portal((onConfirm, onCancel) => {
13          return (
14            <SomeFormComponent open>
15              <button onClick={() => onConfirm({ potatoes: true })}>
16                Confirm
17              </button>
18              <button onClick={onCancel}>Cancel</button>
19            </SomeFormComponent>
20          );
21        });
22
23        if (input) fetch();
24        else alert('You cancelled.');
25      }}
26    >
27      Click me to open a modal
28    </button>
29  );
30}

Credits

react-promiseportal is built and maintained by babangsund.
@blog.
@github.
@twitter.