What is a portal?

Learn to render a component elsewhere in the DOM with createPortal.

What is a portal?

Normally a component renders into the DOM where it is placed. A portal lets you render a component to a different place in the DOM. It uses ReactDOM.createPortal.

The most common use: modals, dropdowns and notifications. These usually render at the top of the page, independent of all content. Without a portal, a parent's overflow: hidden could clip the modal.

The portal renders elsewhere in the DOM but stays a child of its parent in the React tree; events bubble to the parent.

Modal example

Using a portal for a modal is common. First you define a div id="modal-root" in the HTML; outside the app root, as a direct child of body. The modal component portals into this node.

This way the modal is unaffected by the parent's styles. With position: fixed it covers the screen; z-index puts it on top. Behaviors like click-to-close live in the parent.

When the modal closes, the portal content is removed from the DOM; this provides automatic cleanup.

Exercise Modal portal

Complete the skeleton below. Write a ModalPortal component; use createPortal to render <div className="modal">Hello</div> into document.getElementById("modal-root"). Export it.

Show example solution

import { createPortal } from "react-dom";

function ModalPortal() {
  return createPortal(
    <div className="modal">Hello</div>,
    document.getElementById("modal-root")
  );
}

export default ModalPortal;

Test yourself

What is a portal most used for?
- Modal
- Liste
- Form
- Tablo
Show answer

Modal — It is used for modals, dropdowns and notifications.

createPortal call

import { createPortal } from "react-dom";

return createPortal(<Modal />, document.getElementById(____));

Show answer

import { createPortal } from "react-dom";

return createPortal(<Modal />, document.getElementById("modal-root"));

What is a portal: match the terms

createPortal

Renders into another node
modal-root

Target node
modal

Common use
overflow: hidden

Problem without a portal

Next lesson: Modal example

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies