react-cool-portal .React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body>
or else.
This is a React hook for Portals. It helps you render an element outside of its component hierarchy. From now on you will never need to struggle with modals, dropdowns, tooltips etc. Hope you guys it.
The following example shows you how to create your own modal component by react-cool-portal
.
import React from 'react';
import usePortal from 'react-cool-portal';
const App = () => {
const { Portal, isShow, show, hide, toggle } = usePortal({
containerId: 'my-portal-root', // Use your own portal container. If no set, we'll create it for you.
defaultShow: false, // Default is true.
clickOutsideToHide: true, // Default is true.
escToHide: true, // Default is true.
onShow: e => {
// Triggered on show portal.
// The event object will be: MouseEvent, KeyboardEvent, Your custom event.
},
onHide: e => {
// Triggered on show portal.
// The event object will be: MouseEvent, KeyboardEvent, Your custom event.
}
});
return (
<div>
<button onClick={show}>Open Modal</button>
<button onClick={hide}>Close Modal</button>
<button onClick={toggle}>Toggle Modal</button>
<Portal>
{/* The "isShow" can be used to control CSS transition, animation */}
<div class={`modal ${isShow ? 'fade-in' : 'fade-out'}`} role="dialog">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</Portal>
</div>
);
};
Author: wellyshen
Live Demo: https://react-cool-portal.netlify.com/
GitHub: https://github.com/wellyshen/react-cool-portal
#reactjs #javascript