In this article, we'll dive into the concept of portals in React and see how they can be used to enhance your UI components.
Portals in React are a powerful tool for rendering components outside of their parent component's DOM tree. They provide a way to detach a component from its parent and attach it to a different DOM node, rather than being inside its parent component. This allowing for greater flexibility and improved UI design. This can be useful in certain cases where you want to render a component that is logically a child of a certain component, but you need it to be physically detached from its parent component in the DOM tree.
With portals, you can create modals, tooltips, or other UI elements that need to be displayed on top of other components, regardless of their parent-child relationship. Portals are created using the ReactDOM.createPortal method and can be used to bring your components to life in new and creative ways.
Let's say, you might have a modal component that you want to render outside of your main app component, so that it appears on top of other components regardless of the parent-child hierarchy. Portals provide a way to do this by creating a new root in the DOM and attaching your component to it. You provide the component you want to render and the DOM node where you want to render it.
For example:
function Modal({ children }) {
return ReactDOM.createPortal(children, document.getElementById("modal-root"));
}
In above example, we have a Modal component that renders its children using a portal. The document.getElementById('modal-root') is a DOM node that we've created elsewhere in our HTML file (index.html), where we want to render our modal component.
This way, we can render the modal component outside of the main app component and have it appear on top of other components.
DOM node that we've created in our HTML
<div id="modal-root"></div>
Rendered HTML
The Modal component will be rendered into the modal-root element, which you would need to define in your HTML:
🍀Support
Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!
Top comments (10)
This is the common way to create DOM elements with JS:
unless you append the "child" to anything, it is not rendered. So, this is a detached part of the DOM tree and you can easily build a part of your app as a child of this element.
What ist the difference to portals?
Thank you for your feedback. It's a little different in React. Let's say, it's allow you to render a component outside of the parent component's DOM tree and attach it to a specific DOM node in the DOM tree. Meaning that the component will be rendered as part of the DOM tree but it won't be a child of the parent component. It's helpful to control the placement of your components in a more specific way.. Portals provide a clean and organized way to manage these thing..
I literally struggled while creating a simple popup modal when I was learning React. But portals saves the day for me.
Glad to hear that portals were helpful in resolving your issues.. thank you for reading and feedback..
What are other uses for portals besides creating modals?
It can be used for many reasons not just for modals.. Let's say, you can use portals to create popovers, notifications, tooltips, or any other UI componen that you want to render outside of the parent component's tree. This can be useful for cases where you want to keep the UI component within the DOM flow, but you want to position it differently or isolate it from the parent component's styles..
Thank you Nikolas for reading my article.. Happy coding..
Another use case for portals could be migrating a plain JS/html app to react gradually.
Yes, that's a great point.. Thank you Feskov for reading it and your valuable feedback..
Modals are one of the worst UX ever
Thank you Sojin, for sharing your opinion on modals.. So true, modals can be disruptive to the user experience if not designed or implemented correctly.. Good design and careful consideration can help ensure that modals are used effectively and not overused..