Promise portals for React
npm install react-promiseportalPromise portals for React
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:
``js`
// Using ES6 Modules
import { usePromisePortal } from 'react-promiseportal';
// using CommonJS modules
const usePromisePortal = require('react-promiseportal').usePromisePortal;
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:
`jsx
// App.js
import React from 'react';
function App() {
const [isOpen, setOpen] = React.useState(false);
return (
<>
alert('You confirmed!');
setOpen(false);
}}
>
Confirm
alert('You cancelled.');
setOpen(false);
}}
>
Cancel
);
}
`
In large components, managing several modals with different isOpen state can be confusing. react-promiseportal
With , I offer complete co-location.
At the top-level of your application, import the PromisePortalProvider module.
`jsx
// AppContext.js
import React from 'react';
import { PromisePortalProvider } from 'react-promiseportal';
function AppContext() {
return (
);
}
`
You can then import usePromisePortal (hook) or withPromisePortal (hoc).
`jsx
// App.js
import React from 'react';
import { usePromisePortal } from 'react-promiseportal';
function App() {
const portal = usePromisePortal();
return (
const didConfirm = await portal((onConfirm, onCancel) => {
return (
);
});
if (didConfirm) alert('You confirmed!');
else alert('You cancelled.');
}}
>
Click me to open a modal
);
}
`
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:
`jsx
// App.js
import React from 'react';
import { usePromisePortal } from 'react-promiseportal';
function App() {
const portal = usePromisePortal();
return (
// onConfirm is called with {potatoes: true}
// So the promise is resolved with {potatoes: true}
const input = await portal((onConfirm, onCancel) => {
return (
);
});
if (input) fetch();
else alert('You cancelled.');
}}
>
Click me to open a modal
);
}
``
react-promiseportal is built and maintained by babangsund.
@blog.
@github.
@twitter.