React-Global-Portals

💖 React-Global-Portals takes from you all worries related to show notifications/modal etc. on top of everything 💖

❯ Instalation

``bash
$ yarn add react-global-portals
`

or

`bash
$ npm install react-global-portals
`

❯ Features

- Painless setup
- Effortless to use
- Use inside or outside of components
- Define position per portal
- Portals can be dismissed automatically
- Pause portal when the window losses focus
- Display any react component
- Can remove a portal programmatically
- Queue portals

❯ Small usage examples

It needs \ to render portals. Example setup:

`javascript
export function App() {
return (


// This is required
)
}
`

A react component that will be used in examples listed below

`javascript
function ExampleComponent() {
return (



);
}
`

portal.show

portal.show - it shows component as a portal, if any portal is already shown it will queue the passed one and show it when the current is dismissed.

- It simply shows component on top.

`javascript
const portalId = portal.show();
`

- It shows component on top but with passed id

`javascript
const customPortalId = 'Portal Id';
const portalId = portal.show(, { id: customPortalId });
// portalId === customPortalId
`

- We can add time in miliseconds when it should dismiss, and decide if timeout should be paused on focus loss

`javascript
const portalId = portal.show(, {
timeout: 2000,
pauseOnFocusLoss: true,
});
`

- We can also change the position. By default, portal takes whole page but it can be easily changed

`javascript
const portalId = portal.show(, {
position: {
width: '100vh',
height: '50vh',
bottom: '0',
},
});
`

portal.forceShow

portal.forceShow - allows to forcefully show portal, when any portal is already shown it will queue the current and show one thas was passed. Additionally, it can takes parameter of a type ForceAction that can be:

- DismissNone : default action, put current portal into queue and show one that was passed
- DismissCurrent : dismiss currently shown portal and show one that was passed
- DismissQueue : dismiss all portals that are queued, queue the current one and show one that was passed
- DismissAll : dismiss all portals (current and queued), and show one that was passed

- Show passed component on top, and queue currently shown (if any)

`javascript
const portalId = portal.forceShow();
`

- Additionally, portal has custom Id and it will dismiss ALL other portals

`javascript
const portalId = portal.forceShow(
,
{ id: 'CustomId' },
'DismissAll'
);
`

- This one will be dismissed after 5000 ms

`javascript
const portalId = portal.forceShow(
,
{ timeout: 5000 },
'DismissAll'
);
`

portal.dismiss

portal.dismiss - dismiss portal or delete it from queue.

- Dismiss currently displayed portal

`javascript
portal.dismiss();
`

- Dismiss portal with identifier

`javascript
portal.dismiss('myPortal');
`

portal.dismissAll

portal.dismissAll - it dismiss current portal and deletes all queued portals

`javascript
portal.dismissAll();
``

Live Examples

At the moment examples are provided only inside examples folder

License

Licensed under MIT