#portals — 10LOC

Reactintermediate

Portals for rendering a modal outside the DOM hierarchy

import { useEffect, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";

export const Modal = ({ children, onClose }: { children: ReactNode; onClose: () => void }) => {
  const [container] = useState(() => document.createElement("div"));

Render a modal into its own DOM node with createPortal, so its stacking context and layout escape a clipped or transformed ancestor.