Portals In React

A React portal allows you to render an object outside the component's hierarchy, i.e., in a different component. Portals may be used in React to display an element beyond its parent component's DOM node while maintaining its place in the React hierarchy, enabling it to retain the behaviors and values inherited through the React tree.

Before React 16.0, rendering child components outside their parental component hierarchies was extremely difficult. If we do this, we break the rule that a component must render in a new element and stick to a parent-child relationship.

In React, a parent component usually wants to go wherever its child component goes. This is where the React portal concept comes in.

So far, we've had one DOM element in the HTML into which we've attached our react application, namely the root component of our index.html file in the public folder. Essentially, we attach our App component to our root component. A div component with the id root as the root DOM element is standard.

Looking at the browser's DOM tree, you'll notice that every React component in our application is underneath the root element within this sentence.

<div id=“rootelement”></div>

But React Portals allow us to exit this dom tree and display a component on a dom node that is not beneath this root element.

This violates the rule that a component must be presented as a new element and adhere to a parent-child hierarchy. Modal dialogue windows, hover cards, loaders, and pop-up messages are all examples of how they're used.

Syntax:

ReactDOM.createPortal(child, container)

Parameters: The initial parameter is a child, which may be a React component, string, or part, and the subsequent parameter is its container, which is the DOM node (or place) outside the DOM structure of the component that is the parent where our portal will be inserted.

Importing: To construct and use portals, import ReactDOM according to the example below.

import ReactDOM from ‘react-dom';

Portals may be created with the ReactDOM.createPortal() method, which is accessible from the react-dom package, and adds functionality to the react package. Below is how portals work in React:

1. Setting up the Project: To use portals in React, you must first create a React project. You may start a new React project with tools like Create React App or your favorite build method.

2. The dependencies to Install: Check that your project contains both the react and react-dom components. You can use npm or yarn to install them:

npm install react react-dom

Creating a Portal:

It would be best to use ReactDOM to construct a portal.createPortal() is a portal method. This function accepts two arguments: the content to be rendered and the destination DOM node where it should be rendered. Here's an example of how to put it to use:

import React from 'react';

import ReactDOM from 'react-dom';

const Ex = ({ children }) => {

const exRoot = document.getElementById('modal-root');

return ReactDOM.createPortal(

children,

exRoot

);

};

export default Ex;

In this example, the Modal components construct a portal that displays children onto an intended DOM node with the ID modal root. The intended component can be specified anywhere on the HTML page.

Using the Portal Component:

Once you've defined the portal's component, you may use it inside the application to render information in a separate region of the DOM structure.

import React from 'react';

import Modal from './Modal';

const App = () => {

  return (

    <div>

      <h1>Hi,Hello</h1>

      <Modal>

        <p>This is an example of the model component!</p>

      </Modal>

    </div>

  );

};

export default App;

In this example, irrespective of its location in the React components tree, the material of the Modal component will be presented inside the modal-root component.

Styling the Portal Content:

Because the portal content is displayed outside of the DOM tree of its original component, you might have to think about CSS styles or other styling to ensure the material appears suitable in its new position.

Event Bubbling and Capture:

When employing portals, it is critical to consider event propagation. Events originating in the portal contents will rise through the React component tree, following the standard DOM event flow. To catch events at the portal border, utilize regular DOM listeners for events within the portal target component.

Limitations and Use Cases:

The portals are a powerful tool but should only be used carefully. Consider the following limits and usage cases:

Due to browser security constraints, portals cannot be used for cross-origin rendering.
Modals, tooltips, selection menus, and other graphical elements that must be presented outside the parent component's architecture can be rendered via portals.
When using portals, handling attention management effectively is critical to ensure an improved user experience for assistive technology and keyboard navigation.

← Prev Next →