When we create a React app, we often face challenges with UI elements such as models, tool tips and drop -downs. These React components must be free from the original containers and appear over other elements.
This is the place where the React Portal (createPortal) comes from. The portals allow you to present a React component modal, tooltip, or notification outside the original DOM hierarchy, even while living inside the Virtual DOM of React.
If you want to learn React effectively, it should be an address for the portals.
What is React createPortal?
By default, the React components present the parents inside the DOM tree. But sometimes we need them:
- Act out of the Parent DOM structure
- Avoid being affected by overflow, z-index or position styles
The createPortal in React solves this problem.
Syntax
ReactDOM.createPortal(child, container)
- child – The React element you want to render.
- container – The DOM node where the element should be mounted.
Why Use React Portal?
Using portals is useful when:
- A React modal example should be displayed over all materials.
- React tooltip/popover should not be cut by overflow: hidden.
- A React notifications/toast example must be shown globally (e.g., top-right corner).
EstablishmentUp React Portals
<body> <div id="root"></div> <!-- Main React app --> <div id="modal-root"></div> <!-- Portal target --> </body>
React Portals Use Cases
1. React Modal Example (Dialogs)
Problem: Nested modals can get hidden due to CSS (overflow: hidden, z-index).
Solution: Use createPortal in React to render modals outside the normal hierarchy.
import React, { useState } from "react";
import ReactDOM from "react-dom";
const Modal = ({ isOpen, onClose, children }) => {
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className="modal-overlay">
<div className="modal-content">
<button onClick={onClose}>Close</button>
{children}
</div>
</div>,
document.getElementById("modal-root")
);
};
const App = () => {const [isModalOpen, setIsModalOpen] = useState(false);
return (
<div style={{ padding: "50px" }}>
<button onClick={() => setIsModalOpen(true)}>Open Modal</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
<h2>Modal Title</h2>
<p>This is a modal using React Portal!</p>
</Modal>
</div>
);
};
export default App;
2. React Tooltip / Popover
Problem: Tooltips get cut off when parent containers have overflow: hidden.
Solution: Render tooltips/popovers using portal directly into document.body.
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
const Tooltip = ({ text, targetRef }) => {
if (!targetRef.current) return null;
const { top, left, height } = targetRef.current.getBoundingClientRect();
return ReactDOM.createPortal(
<div className="tooltip" style={{position: "absolute",top: top + height + 5 + "px",left: left + "px",
background: "black",color: "white",padding: "5px",borderRadius: "4px",}}> {text} </div>,
document.body
);
};
const App = () => {const [showTooltip, setShowTooltip] = useState(false);
const buttonRef = useRef(null);
return (
<div style={{ padding: "50px" }}>
<button ref={buttonRef} onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)}>Hover Me </button>
{showTooltip && <Tooltip text="This is a tooltip!" targetRef={buttonRef} />}
</div>
);
};
export default App;3. React Notifications / Toast Example
Problem: Toast messages should appear globally, not inside nested components.
Solution: Use a portal to render notifications at the top-level container.
import React, { useState } from "react";
import ReactDOM from "react-dom";
const Notification = ({ message }) => {
return ReactDOM.createPortal(
<div style={{ position: "fixed", top: "20px", right: "20px", background: "green", color: "white",
padding: "10px",borderRadius: "4px",}}> {message} </div>,
document.getElementById("modal-root")
);
};
const App = () => {
const [notification, setNotification] = useState("");
const showNotification = () => {
setNotification("This is a notification!");
setTimeout(() => setNotification(""), 3000);
};
return (
<div style={{ padding: "50px" }}>
<button onClick={showNotification}>Show Notification</button>
{notification && <Notification message={notification} />}
</div>
);
};
export default App;
Benefits of React Portals
- Avoid lack of bypass parent – CSS problems (Z index, overflow).
- Better access – Modals/tool tips behave properly.
- UI stability – Global UI holds the elements in place.
- Flexible Rendering – Present the elements anywhere in the DOM.
React Portals Restrictions
- Arrangement management complexity – Events Bubble Parent React Tree (may need stopPropagation).
- Extra DOM Setup – Requires containers like modal-root
- SEO challenges – Not ideal for SEO-critical content (dynamically injected).
Conclusion
The React Portal (createPortal) is a powerful feature that helps create better UI components such as models, tooltips, popovers and global notifications.
While portals require extra DOM setup and care for event handling, they solve the real UI challenges and are crucial for each developer who wants to learn React.
Next time you build a React app, try using a portal for modals, tooltips, or toast messages – your user interface will thank you!
Professional React development for modals, tooltips, and notifications.
Let’s discuss your project.
FAQS
A React Portal allows rendering components outside their parent DOM hierarchy while staying in React’s tree.
Import ReactDOM.createPortal(child, container) and render elements into a custom DOM node (e.g., modal-root).
It’s a modal built as a React component and rendered using portals for better visibility.
Yes, using a portal for tooltips prevents them from being clipped by parent containers.
Yes, portals are perfect for React notifications / toast examples since they need to appear globally.
