React Portals

Summary: in this tutorial, you will learn how to use React portals to render children into a DOM node outside the parent component’s DOM hierarchy.

Introduction to React portals

React portals provide a way to render children into a DOM node outside the parent component’s DOM hierarchy.

React portals can be useful when rendering components outside the regular DOM hierarchy such as modals, tooltips, or dropdowns.

To create a portal, you use the ReactDOM.createPortal() function. The createPortal function takes two arguments:

• JSX content to render.
• A DOM node where you want to render the JSX content.

We’ll create a reusable modal component in React to demonstrate the React portals.

Creating a new React project

First, open your terminal and run this command to create a new React project:

npx create-react-app react-portalsCode language: JavaScript (javascript)

Second, navigate to the react-portals directory.

cd react-portalsCode language: JavaScript (javascript)

Third, run the following command to start the React app:

npm startCode language: JavaScript (javascript)

We’ll delete all files in the src directory and start from scratch.

Creating the first version of the modal

Step 1. Create an index.js file that shows the App component on the screen:

import ReactDOM from 'react-dom/client';
import App from './App';

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

root.render(<App />);Code language: JavaScript (javascript)

Step 2. Create the App component:

import { useState } from 'react';

const App = () => {
  return (
    <div className="container">
       Modal
    </div>
  );
};

export default App;Code language: JavaScript (javascript)

Step 3. Create the Modal component:

import './Modal.css';

const Modal = () => {
  return (
    <div className="modal-container"> 
        Modal
    </div>
  );
};

export default Modal;Code language: JavaScript (javascript)

Step 4. Create an empty Modal.css file.

Step 5. Enhancing the App component to display the modal.

import { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const handleClick = () => setShowModal(!showModal);

  return (
    <div className="container">
      <button type="button" onClick={handleClick}>
        Open
      </button>
      {showModal && <Modal />}
    </div>
  );
};

export default App;Code language: JavaScript (javascript)

The App component uses the showModal state to show/hide the modal. If the showModal is true, the Modal component will display, and if false the Modal component won’t display.

The App component also has a button that opens the modal when clicked. When the click event occurs, we flip the value of the showModal state from false to true to show the modal.

Step 6. Showing contents on the modal.

import './Modal.css';

const Modal = () => {
  return (
    <div className="modal-container">
      <div className="modal">
        <h2>Modal is cool </h2>
        <p>This is a modal in React</p>
      </div>
    </div>
  );
};

export default Modal;Code language: JavaScript (javascript)

Step 7. Adding the style to the Modal.css file:

.modal-container {
  /* create an overlay */
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);

  /* center the modal */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}Code language: JavaScript (javascript)

When you click the button, the modal will display: