Simplify Your Modals in React: The Power of Portals

Nov 09, 2024

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 into document.body. This ensures the modal is independent of the App component’s styles and layout.
Context Access: The modal accesses the UserContext using useContext, 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 in UserContext.Provider to pass down the user data, which includes a username.
Modal Control: Clicking the "Open Modal" button sets isModalOpen to true, 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 the App.

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 to createPortal. 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 the App 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! :)

If you want to level up your front-end dev career with React. There is one way I can help you:

REACT PRO SERIES: TYPESCRIPT

This course teaches you exactly how to build React projects with TS.

All the knowledge you need. Practical challenges. One complete React TS project. And best practices across the course.

Saturday Front End

Discussion about this post