Simplify Your Modals in React: The Power of Portals
READ TIME - 4 MINUTES
In this article, I’ll walk you through a key React feature that simplifies creating modals without worrying about style interference from parent components.
You’ll learn how to use portals to keep your modals visually consistent and independent while still accessing contextual data.
React portals make rendering modals much easier, especially when you need the modal to remain unaffected by the surrounding application’s styles. By placing the modal in a different location in the DOM, portals help ensure it stays visually isolated.
One of the main challenges when creating modals in React is that they often inherit styles from their parent components. This can result in unwanted style conflicts, making it hard to maintain a clean and consistent look for your modals.
Solution: Portals in React
React portals let you render a component’s child elements into a different part of the DOM. This is particularly useful for modals because it prevents them from inheriting styles from their parent component, which could otherwise interfere with the modal’s layout.
When using a portal, only the physical placement of the DOM node changes. The portal still acts as a child node of the component that renders it, so you retain access to parent contexts, event bubbling, and other React tree functionalities.
Step-by-Step Simple Example: Using Portals to Avoid Style Interference in Modals with UserContext
Let’s look at a straightforward example to see portals in action, where the modal accesses user information from UserContext
.
1. Define the UserContext
We’ll create a UserContext
that provides user data to the components in our app.
2. Set Up the Modal Component
Now, we define a simple modal component that uses createPortal
to render the modal into document.body
, separate from the main app. The modal accesses UserContext
to display the username.
Explanation
Portal Creation: By calling
createPortal
, we render the modal’s content directly intodocument.body
. This ensures the modal is independent of theApp
component’s styles and layout.Context Access: The modal accesses the
UserContext
usinguseContext
, showing that portals don’t lose access to the parent component’s context. In this case, it displays the username in the modal content.
3. Integrate the Modal in the Main Application
Now, let’s create a main component (App
) where we provide the UserContext
and trigger the modal.
Explanation
User Context Provider: We wrap the
App
component inUserContext.Provider
to pass down the user data, which includes a username.Modal Control: Clicking the "Open Modal" button sets
isModalOpen
totrue
, displaying the modal on top of the application.Access to Context: Despite being rendered outside the main DOM tree, the modal component can access
UserContext
, allowing it to display the username provided by theApp
.
Final HTML Structure in the DOM
When you inspect the DOM structure in developer tools with the modal opened, you’ll see that the app content and the modal are located in different places:
Explanation
<div id="root">: This is where React renders the main app. The primary structure of the app (including the "Open Modal" button) is contained within this div.
<div class="modal__overlay">: This div contains the modal and is rendered directly into the
<body>
element, outside<div id="root">
, thanks tocreatePortal
. This separation prevents any styling conflicts from the main container.
We can see that the portal places the modal in a different location in the DOM.
Key Takeaways
Visual Isolation: By rendering the modal in
document.body
, the modal avoids inheriting styles from theApp
component, preserving a consistent look.Context Access: The portal still acts as a child node of the component that renders it so the modal can access context provided by its parent.
Conclusion
Using portals in React is a powerful way to handle modals without dealing with unintended style conflicts.
By isolating the modal in document.body
, you achieve a cleaner design that improves user experience and code maintainability.
With React portals, your modals can finally have the isolation they need while remaining fully functional within the React component tree.
Give portals a try in your next project, and see the difference!
See you next Saturday!
Keep up the great work! :)