📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › React Modern Development › Portals

Portals

5 min read
Portals render content into a different DOM node with createPortal(children, domNode). Events still bubble through the React tree normally. Perfect for modals and tooltips that must visually escape parent overflow.

React Portals

import { createPortal } from "react-dom";

function Modal({ children, isOpen }) {
  if (!isOpen) return null;

  return createPortal(
    

      
{children}

    
,
    document.getElementById("modal-root")  // outside #root
  );
}

// In index.html: <div id="modal-root"></div>