Managing z-index Issues with Portals in React JS

Introduction

In React, portals allow you to render components outside the DOM hierarchy of their parent component. However, when rendering elements like modals or tooltips using portals, z-index issues can arise. These issues occur because the rendering of these elements outside the normal DOM structure can cause them to be positioned incorrectly in relation to other elements.

In this tutorial, we will discuss how to manage z-index issues in React when using portals for elements like modals and tooltips.

Understanding z-index and Portals

The z-index property in CSS determines the stacking order of elements. Elements with a higher z-index appear in front of elements with a lower z-index. When rendering elements using portals, React components are moved outside the normal DOM flow, and their z-index might conflict with other elements on the page.

In order to solve z-index issues when using portals, we need to ensure that the portal element (such as a modal or tooltip) is properly layered above other content on the page.

Step 1: Setting Up the HTML Structure

First, we will create a container in the public/index.html file where the portal content will be rendered. This is where the modal or tooltip will appear.

The portal-root div is where portal content will be injected by React. Now, let's create a modal and use a portal to render it into this container.

Step 2: Creating a Basic Modal with a Portal

We will create a simple modal component and use React portals to render it outside the normal DOM structure. However, we won't handle z-index yet, which may cause issues when the modal appears.


  import React, { useState } from 'react';
  import ReactDOM from 'react-dom';
  
  function Modal({ onClose }) {
      return (
          

              
This is a modal

              
          

      );
  }
  
  function App() {
      const [isModalOpen, setModalOpen] = useState(false);
  
      const openModal = () => setModalOpen(true);
      const closeModal = () => setModalOpen(false);
  
      return (
          

              
Welcome to the React App

              
              {isModalOpen && ReactDOM.createPortal(
                  ,
                  document.getElementById('portal-root')
              )}
          

      );
  }
  
  export default App;

This simple modal is rendered using a portal into the portal-root div. However, without adjusting z-index, the modal might appear behind other content on the page, depending on its position in the DOM and the surrounding content's styles.

Step 3: Adding z-index to Manage Layering

To solve the z-index issue, we can manually set the z-index for the modal component. We will set the z-index to ensure that the modal appears in front of other content on the page.


  import React, { useState } from 'react';
  import ReactDOM from 'react-dom';
  
  function Modal({ onClose }) {
      return (
          

              
This is a modal

              
          

      );
  }
  
  function App() {
      const [isModalOpen, setModalOpen] = useState(false);
  
      const openModal = () => setModalOpen(true);
      const closeModal = () => setModalOpen(false);
  
      return (
          

              
Welcome to the React App

              
              {isModalOpen && ReactDOM.createPortal(
                  ,
                  document.getElementById('portal-root')
              )}
          

      );
  }
  
  export default App;

In this updated example, we set the zIndex style property to 1000 in the modal component. This ensures that the modal is rendered above other content, which might have a lower z-index or default z-index value.

Step 4: Handling Multiple Portals with Different z-index Values

In some cases, you may have multiple portals on the page (e.g., a modal and a tooltip), and you want to control the stacking order of these elements. You can set different z-index values to ensure the correct layering of these elements.


  import React, { useState } from 'react';
  import ReactDOM from 'react-dom';
  
  function Modal({ onClose }) {
      return (
          

              
This is a modal

              
          

      );
  }
  
  function Tooltip() {
      return (
          

              This is a tooltip
          

      );
  }
  
  function App() {
      const [isModalOpen, setModalOpen] = useState(false);
      const [showTooltip, setShowTooltip] = useState(false);
  
      const openModal = () => setModalOpen(true);
      const closeModal = () => setModalOpen(false);
  
      return (
          

              
Welcome to the React App

              
              
              {isModalOpen && ReactDOM.createPortal(
                  ,
                  document.getElementById('portal-root')
              )}
              {showTooltip && ReactDOM.createPortal(
                  ,
                  document.body
              )}
          

      );
  }
  
  export default App;

In this example, the modal has a higher z-index (1000) than the tooltip (999), so the modal will appear above the tooltip when both are visible at the same time.

Step 5: Managing z-index Dynamically

If you need to manage z-index dynamically (e.g., when multiple modals or tooltips are used), you can set the z-index programmatically based on the state or other conditions in your app.


  import React, { useState } from 'react';
  import ReactDOM from 'react-dom';
  
  function Modal({ onClose, zIndex }) {
      return (
          

              
This is a modal

              
          

      );
  }
  
  function App() {
      const [isModalOpen, setModalOpen] = useState(false);
      const [modalZIndex, setModalZIndex] = useState(1000);
  
      const openModal = () => setModalOpen(true);
      const closeModal = () => setModalOpen(false);
      
      const increaseZIndex = () => setModalZIndex(modalZIndex + 1);
  
      return (
          

              
Welcome to the React App

              
              
              {isModalOpen && ReactDOM.createPortal(
                  ,
                  document.getElementById('portal-root')
              )}
          

      );
  }
  
  export default App;

In this final example, we manage the z-index dynamically by updating the modalZIndex state, allowing you to adjust the z-index value when needed.

Conclusion

Managing z-index issues with React portals is important for ensuring proper layering and visibility of elements like modals and tooltips. By understanding how to set the z-index in your portal components, you can control the stacking order and prevent issues where elements may appear behind others. Additionally, you can dynamically adjust z-index values based on the app's state to handle more complex scenarios.




Advertisement