Understanding React Portals and Its Use-Cases
React Portal is a first-class way to render child components into a DOM node outside of the parent DOM hierarchy defined by the component tree hierarchy. The Portal's most common use cases are when the child components need to visually break out of the parent container as shown below.
- Modal dialog boxes
- Tooltips
- Hovercards
- Loaders
A Portal can be created using ReactDOM.createPortal(child, container). Here the child is a React element, fragment, or a string, and the container is the DOM location(node) to which the portal should be injected.
Following is a sample modal component created using the above API.
const Modal =({ message, isOpen, onClose, children })=> {
if (!isOpen) return null
return ReactDOM.createPortal(
<div className="modal">
<span className="message">{message}</span>
<button onClick={onClose}>Close</button>
</div>,
domNode)
}Even though a Portal is rendered outside of the parent DOM element, it behaves similarly to a regular React component within the application. It can access props and the context API. This is because the Portal resides inside the React Tree hierarchy.
For a real-life example of React Portals, check out this component shared on Bit’s component hub (you can use Bit to share and reuse components too):
Why do we need it?
When we use a modal inside a particular element (a parent component), the modal's height and width will be inherited from the component in which the modal resides. So there is a possibility that the modal will be cropped and not be shown properly in the application. A traditional modal will require CSS properties like overflow:hidden and z-index to avoid this issue.
The above code example will result in rendering the modal inside the nested components under the root. When you inspect the application using your browser, it will display the elements, as shown below.
Let's see how React Portal can be used here. The following code will resolve this issue using the createPortal() to create a DOM node outside of the root tree hierarchy.
const Modal =({ message, isOpen, onClose, children })=> {
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className="modal">
<span>{message}</span>
<button onClick={onClose}>Close</button>
</div>
,document.body);
}function Component() {
const [open, setOpen] = useState(false)
return (
<div className="component">
<button onClick={() => setOpen(true)}>Open Modal</button>
<Modal
message="Hello World!"
isOpen={open}
onClose={() => setOpen(false)}
/>
</div>
)
}
Shown below is the DOM tree hierarchy, which will be resulted when using React Portals, where the modal will be injected outside of the root, and it will be at the same level as the root.
Since this modal is rendered outside of the root hierarchy, its dimensions would not be inherited or altered by the parent components.
You can find this example through this CodeSandbox, where you can play around with the code, see how the portal works, and address the issues being discussed.
Things to consider when using Portals
When using React Portals, there are several areas you should be mindful of. These behaviors are not visible directly unless you get to know them. Therefore I thought of mentioning them here.
- Event Bubbling will work as usual — Event bubbling will work as expected by propagating events to the React tree ancestors, regardless of the Portal node location in the DOM.
- React has control over Portal nodes and its lifecycle — When rendering child elements through Portals, React still has control over their lifecycle.
- Portals only affect the DOM structure — Portals only affect the HTML DOM structure and not impact the React components tree.
- Predefine HTML mount point — When using Portals, you need to define an HTML DOM element as the Portal component’s mount point.
Conclusion
React Portal comes in handy when we need to render child components outside the normal DOM hierarchy without breaking the event propagation's default behavior through the React component tree hierarchy. This is useful when rendering components such as modals, tooltips, popup messages, and so much more.
You can find more information on Portals in the React official documentation.
Thank you for taking the time to read this. I would like to see your questions and comments on this topic in the comments section below.
Cheers!
