ReactJs Portals

Portals in ReactJS offer a way to render a child component outside the DOM hierarchy of its parent. This feature enhances the flexibility of React's component model and enables advanced use-cases such as modal dialogs, pop-ups, and tooltips.

Syntax

A portal in ReactJS is defined using the ReactDOM.createPortal() method, which takes two arguments:

ReactDOM.createPortal(child, container);

child: The child component to render as a portal.

container: The DOM node where the child component will be rendered.

Example

Here is an example of using a portal to render a modal dialog outside the main document flow:

import React from 'react';
import ReactDOM from 'react-dom';

function ModalDialog(props) {
  return ReactDOM.createPortal(
    props.children,
    document.getElementById('modal-root')
  );
}

function App() {
  return (
    <div>
      <h1>ReactJS Portals Example</h1>
      <p>
        This is the main document flow.
        Click the button below to open a modal dialog.
      </p>
      <button onClick={() => setShow(true)}>Open Modal</button>

      {show && (
        <ModalDialog>
          <div className="modal">
            <h2>Modal Dialog</h2>
            <p>This dialog is outside the document flow.</p>
            <button onClick={() => setShow(false)}>Close Modal</button>
          </div>
        </ModalDialog>
      )}
    </div>
  );
}

In this code, the ModalDialog component uses ReactDOM.createPortal() to render its child component (props.children) inside a different container (document.getElementById('modal-root')). This container is typically located outside the main document flow, such as in the body element.

Output

When you run the example code, you will see a page with a button that opens a modal dialog when clicked. The dialog is rendered outside the document flow and overlays the main content, as shown below:

Explanation

Portals in ReactJS provide a way to render a child component outside the DOM hierarchy of its parent. This enables the creation of UI elements that are not constrained by the limitations of the parent component's layout.

In the example code, the ModalDialog component renders its child component inside a div that is located outside the main document flow, as specified by the container argument to ReactDOM.createPortal(). This allows the modal dialog to appear on top of the main content, regardless of its position in the DOM hierarchy.

Use

Portals in ReactJS are typically used to render UI elements that need to appear outside the document flow, such as modal dialogs, pop-ups, and tooltips.

By using a portal, you can isolate these UI elements from the layout constraints of their parent component, and position them precisely where you want them in the document.

Important Points

• Portals in ReactJS allow you to render a child component outside the DOM hierarchy of its parent.
• The ReactDOM.createPortal() method is used to create a portal.
• The child component and the target container are specified as arguments to ReactDOM.createPortal().
• Portals enable advanced use-cases such as modal dialogs, pop-ups, and tooltips.

Summary

ReactJS Portals provide a way to render a child component outside the DOM hierarchy of its parent. This feature enables advanced use-cases such as modal dialogs, pop-ups, and tooltips, and enhances the flexibility of React's component model. Portals are created using the ReactDOM.createPortal() method, which takes the child component and the target container as arguments. By using a portal, you can position UI elements precisely where you want them in the document, independent of their parent component's layout.