Understanding React Portals and Its Use-Cases

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.

A typical modal where the parent component overrides the height and width

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.

Modal rendered without React Portal.

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.

Modal rendered with React Portal

Since this modal is rendered outside of the root hierarchy, its dimensions would not be inherited or altered by the parent components.

A model rendered as a Portal

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.

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.

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!

Author: admin

Leave a Reply

Your email address will not be published.