#modal

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.

Chrome APIsintermediate

<dialog> for an accessible modal with zero JS libraries

<button id="delete-trigger">Delete project</button>

<dialog id="confirm-dialog" closedby="any" aria-labelledby="confirm-title">
  <form method="dialog">
    <h2 id="confirm-title">Delete this project?</h2>

showModal(), ::backdrop, and closedby give a modal focus-trapping, Esc-to-close, and light-dismiss — no react-modal, no focus-trap package.