How to use React Portals for modal dialogs



Image not found!!

React Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This can be particularly useful when creating modal dialogs, as it allows you to render the modal content outside the current component's DOM structure.

Here's a step-by-step guide on how to use React Portals for modal dialogs:

  1. Install React:

    Make sure you have React and ReactDOM installed in your project. You can install them using npm or yarn:

    bash
    npm install react react-dom

    or

    bash
    yarn add react react-dom

  2. Create a Modal Component:

    Create a separate component for your modal. This component will be responsible for rendering the modal content. For example, create a file named Modal.js:

    jsx
    // Modal.js
import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  const modalRoot = document.getElementById('modal-root');
  const el = document.createElement('div');

  React.useEffect(() => {
    modalRoot.appendChild(el);
    return () => {
      modalRoot.removeChild(el);
    };
  }, [el, modalRoot]);

  return ReactDOM.createPortal(children, el);
};

export default Modal;

  3. Create a Modal Wrapper Component:

    Create a wrapper component that will use the Modal component and render it conditionally. This component will act as the trigger for showing the modal. For example, create a file named App.js:

    jsx
    // App.js
import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      {isModalOpen && (
        <Modal>
          <div>
            <h2>Modal Content</h2>
            <button onClick={closeModal}>Close Modal</button>
          </div>
        </Modal>
      )}
    </div>
  );
};

export default App;

  4. Create a Modal Root in the HTML:

    In your HTML file, create a div with an id that will act as the root for your modal. This is where the modal content will be appended. For example:

    html
    <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React Modal with Portals</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="modal-root"></div>
  </body>
</html>

    Ensure that the modal-root div is outside the main React root (root).

  5. Style Your Modal:

    Style your modal as needed. You can add CSS styles to the modal content within the Modal component.

With these steps, you should have a basic setup for using React Portals to create modal dialogs. The Modal component handles rendering its content outside the normal React DOM hierarchy, allowing you to create modals that overlay the rest of your application.

Category List