Creating a Reusable Modal Component With Portals in React

Creating a Reusable Modal Component With Portals in React Modals are a common UI pattern, but rendering them outside the main DOM tree can prevent styling and focus issues. This is where React Portals come in. In this tutorial, you'll learn to create a flexible, reusable modal component using portals. Step 1: Set Up Your Project Start with a React project using Create React App or Vite. We'll create a modal component that uses ReactDOM.createPortal to render outside the app root. Step 2: Create the Modal Component Inside components/Modal.js: import ReactDOM from "react-dom"; function Modal({ isOpen, onClose, children }) { if (!isOpen) return null; return ReactDOM.createPortal( ✕ {children} , document.getElementById("modal-root") ); } export default Modal; Step 3: Add the Modal Root In your public/index.html, add a new div outside the root: Step 4: Use the Modal in Your App import { useState } from "react"; import Modal from "./components/Modal"; function App() { const [isOpen, setIsOpen] = useState(false); return ( setIsOpen(true)} className="bg-blue-600 text-white px-4 py-2 rounded" > Open Modal setIsOpen(false)}> Reusable Modal This modal uses React portals to render outside the main DOM tree. ); } export default App; Conclusion With React portals, you can build modals that behave correctly across your app. This pattern also scales well when you need tooltips, dropdowns, or any layered UI components. If this post helped you, consider supporting me: buymeacoffee.com/hexshift

Apr 13, 2025 - 16:02

Creating a Reusable Modal Component With Portals in React

Modals are a common UI pattern, but rendering them outside the main DOM tree can prevent styling and focus issues. This is where React Portals come in. In this tutorial, you'll learn to create a flexible, reusable modal component using portals.

Step 1: Set Up Your Project

Start with a React project using Create React App or Vite. We'll create a modal component that uses ReactDOM.createPortal to render outside the app root.

Step 2: Create the Modal Component

Inside components/Modal.js:

import ReactDOM from "react-dom";

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

  return ReactDOM.createPortal(
    
      
        
        {children}
      
    ,
    document.getElementById("modal-root")
  );
}

export default Modal;

Step 3: Add the Modal Root

In your public/index.html, add a new div outside the root:

Step 4: Use the Modal in Your App

import { useState } from "react";
import Modal from "./components/Modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    
      

       setIsOpen(false)}>
        Reusable Modal
        This modal uses React portals to render outside the main DOM tree.
      
    
  );
}

export default App;

Conclusion

With React portals, you can build modals that behave correctly across your app. This pattern also scales well when you need tooltips, dropdowns, or any layered UI components.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift