Creating a Portal for Modals and Tooltips in React JS

Introduction

In React, a portal is a way to render a child component outside the parent component's DOM hierarchy. Portals are useful for creating elements like modals and tooltips that need to be rendered above other content in the UI. In this tutorial, we will learn how to create modals and tooltips using React portals.

What is a Portal in React?

A portal in React allows you to render a child component into a DOM node that exists outside of the parent component's hierarchy. The React function ReactDOM.createPortal(child, container) is used to create a portal.

Syntax:


  ReactDOM.createPortal(child, container)

Where:

  • child: The React element that you want to render.
  • container: The DOM node where the child will be rendered.

Step 1: Set up the HTML Structure

In the public/index.html file, create a div where the portal content will be rendered. This div will act as the container for modals or tooltips.

The portal-root div is where the portal content will be placed. We will use this div in our React app to render modals and tooltips.

Step 2: Creating a Modal Using a Portal

Now, let's create a modal component using a portal. This modal will be rendered outside the normal DOM hierarchy and will be centered on the screen.


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

              
This is a modal

              
Click the button below to close the modal.

              
          

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

              
Welcome to the React App

              
              {/* Use the portal to render the modal outside the main DOM hierarchy */}
              {isModalOpen && ReactDOM.createPortal(
                  ,
                  document.getElementById('portal-root')
              )}
          

      );
  }
  
  export default App;

In this example, the Modal component is rendered inside the portal-root div using ReactDOM.createPortal. When the "Open Modal" button is clicked, the modal appears on the screen. You can close it by clicking the "Close Modal" button, which triggers the closeModal function.

Step 3: Creating a Tooltip Using a Portal

Now, let's create a tooltip using a portal. A tooltip is a small pop-up element that displays when a user hovers over a specific element. We'll render the tooltip outside of the button's normal DOM hierarchy.


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

              {text}
          

      );
  }
  
  function App() {
      const [showTooltip, setShowTooltip] = useState(false);
  
      return (
          

              
Hover over the button to see the tooltip

              
              {/* Use the portal to render the tooltip */}
              {showTooltip && ReactDOM.createPortal(
                  ,
                  document.body
              )}
          

      );
  }
  
  export default App;

In this example, the Tooltip component is rendered using a portal to the document.body element. When the user hovers over the "Hover me!" button, the tooltip appears above the button. The tooltip is hidden when the mouse leaves the button.

Step 4: Combining Modals and Tooltips in One Application

You can combine modals and tooltips in one application by creating different portal components and rendering them conditionally.


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

              
This is a modal

              
Click the button below to close the modal.

              
          

      );
  }
  
  function Tooltip({ text }) {
      return (
          

              {text}
          

      );
  }
  
  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

              
              
  
              {/* Render modal using portal */}
              {isModalOpen && ReactDOM.createPortal(
                  ,
                  document.getElementById('portal-root')
              )}
  
              {/* Render tooltip using portal */}
              {showTooltip && ReactDOM.createPortal(
                  ,
                  document.body
              )}
          

      );
  }
  
  export default App;

In this combined example, we have both a modal and a tooltip. The modal is displayed when the "Open Modal" button is clicked, and the tooltip appears when the user hovers over the "Hover me for Tooltip" button. Both the modal and tooltip are rendered outside their parent DOM elements using React portals.

Conclusion

Portals are a powerful feature in React that allow you to render elements like modals, tooltips, and other UI components outside the regular DOM hierarchy. By using portals, you can avoid issues with overflow, positioning, and z-index that often occur when rendering these elements within their parent component. This tutorial demonstrated how to use portals for modals and tooltips, but they can be applied in other cases where you need to control the rendering position of a component.




Advertisement