react-cool-portal

⚠️ This library is in-progress, API might changed rapidly. I don't recommend to use it now. If you'd like to give it a try, please follow the release note for any change. Here's the milestone.

React Cool Portal

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.

❤️ it? ⭐️ it on GitHub or Tweet about it.

⚡️ Try yourself: https://react-cool-portal.netlify.com

Milestone

• Auto creating/removing the container of the portal
• Renders element to the portal container
• Show/hide/toggle the portal
• onShow/onHide event callbacks
• Support clickOutsideToHide and escToHide interactions
• Server-side rendering compatibility
• Unit testing
• Demo app
• Demo code
• Typescript type definition
• CI/CD
• Documentation

💡 My Idea

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 hide 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>
      <p>Modal is {isShow ? 'opened' : 'closed'}</p>
      <Portal>
        <div class="modal" 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>
  );
};

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Welly 💻 📖 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!