Types of React Portal

💻 React

Types of React Portal Use Cases

React Portals don’t have “official types” defined by React itself, but by convention and
real-world usage, they are categorised by the UI pattern they serve:

#	Type / Pattern	Target DOM Node	Key Reason for Portal
1	Modal Dialog	`#modal-root`	Full-screen overlay, z-index independence
2	Tooltip	`document.body`	Overflow clipping from parent containers
3	Dropdown / Context Menu	`document.body`	Escape overflow, correct absolute positioning
4	Notification / Toast	`#notification-root`	Fixed viewport position, always on top
5	Sidebar / Drawer	`#drawer-root`	Slide over content from viewport edge
6	Dynamic / Programmatic Portal	Dynamically created DOM node	Imperative rendering outside React component

Your First Portal

Let’s start from scratch. This example renders a simple message outside the React root.

Step 1: index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <title>React Portal Demo</title>
</head>
<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>
</html>

Step 2: PortalMessage.jsx


import { createPortal } from 'react-dom';

function PortalMessage() {
  return createPortal(
    <div>
      <h2>Hello from the Portal!</h2>
      <p>This content is mounted inside #portal-root, not #root.</p>
    </div>,
    document.getElementById('portal-root')
  );
}

export default PortalMessage;

Step 3: App.jsx


import PortalMessage from './PortalMessage';

function App() {
  return (
    <div>
      <h1>I am inside #root</h1>
      <PortalMessage />  {/* renders into #portal-root */}
    </div>
  );
}

export default App;

Resulting DOM Structure

<body>
  <div id="root">
    <div>
      <h1>I am inside #root</h1>
    </div>
  </div>

  <div id="portal-root">
    <div>
      <h2>Hello from the Portal!</h2>
      <p>This content is mounted inside #portal-root, not #root.</p>
    </div>
  </div>
</body>

Notice: PortalMessage is used inside App (logical child), but its
HTML output is inside #portal-root (physical DOM location).