react-document-portal

React component that renders its children inside a portal attached to the document.

• 🎁 Lightweight
• 😄 Easy to use with simple API
• 🖨️ Server-side rendering out of the box

Usage

import { useRef } from "react";
import DocumentPortal from "react-document-portal";

const Example = (props) => {
  const portalRef = useRef(null);

  return (
    <DocumentPortal as="section" ref={portalRef}>
      <p>This content is rendered inside a portal.</p>
    </DocumentPortal>
  );
};

Props

• as tag name used to create the portal container, defaults to "div".
• children elements to render inside the portal.
• ref optional React ref that receives the created DOM element.

Returns

A React portal, or null before the DOM node exists.

Requirements

Requires React v16.8.0 or higher.

Server-Side Rendering

This component will not break SSR. On the server, the portal will render null until the DOM is available in the browser.