Neoteric Plumbing Mishap

    react-portal-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    react-portal-hook

    A small React portal library made with hooks. Allows you to render an indefinite number of portals without having to define them in advance. Useful for event-driven notifications or modals where you don't know how many items will be rendered at a given time.

    Getting Started

    Installation

    To use react-portal-hook in your project, run:

    npm install react-portal-hook

    Setup

    Wrap your root component with PortalProvider.

    // app.jsx
    
    import { PortalProvider } from "react-portal-hook";
    
    const App = () => {
      return (
        <PortalProvider>
          <RootComponent />
        </PortalProvider>
      );
    };

    Usage

    Example - Modals:

    By default, portals will be appended to document.body.

    Demo

    // page.jsx
    
    import { usePortals } from "react-portal-hook";
    
    const Modal = ({ closeModal }) => {
      return (
        <div>
          <h2>Title</h2>
          <p>This is a modal</p>
          <button onClick={closeModal}>Close Modal</button>
        </div>
      );
    };
    
    export const Page = () => {
      const portalManager = usePortals();
    
      const openModal = () => {
        portalManager.open(portal => <Modal closeModal={portal.close} />);
      };
    
      return (
        <div>
          <h2>Title</h2>
          <p>This is a page</p>
          <button onClick={openModal}>Open Modal</button>
        </div>
      );
    };

    Example - Notifications:

    You can specify a DOM node in which to render portals with the appendTo option:

    Demo

    // layout.jsx
    
    import { useRef } from "react";
    import { usePortals } from "react-portal-hook";
    
    const Notification = ({ closeNotification }) => {
      return (
        <div>
          <p>
            This is a notification{" "}
            <button onClick={closeNotification}>Close Notification</button>
          </p>
        </div>
      );
    };
    
    export const Layout = () => {
      const portalManager = usePortals();
      const notificationEl = useRef();
    
      const showNotification = () => {
        // Calling this from anywhere in your app will render a notification
        portalManager.open(
          portal => <Notification closeNotification={portal.close} />,
          {
            appendTo: notificationEl.current
          }
        );
      };
    
      return (
        <div>
          <div id="notification-holder" ref={notificationEl} />
          <button onClick={showNotification}>Show Notification</button>
        </div>
      );
    };

    API Documentation

    portalManager

    interface PortalManager {
      /**
       * The react element you want to render in the portal
       */
      element: ((portal: Portal) => React.ReactElement) | React.ReactElement;
      options?: {
        /**
        * An ID to avoid duplicate portals
        */
        id?: string;
        /**
        * A DOM node in which to render the portal
        */
        appendTo?: Element;
        /**
        * A callback that is fired when the portal closes
        */
        onClose?: () => void;
      };
    }

    Portal

    interface Portal {
      /**
      * A function to close the Portal
      */
      close: () => void;
    }

    Install

    npm i react-portal-hook

    DownloadsWeekly Downloads

    380

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • etiennemartin