React Portals — Teleporting the react way

Photo by Caspar Camille Rubin on Unsplash

React v16 has a number of amazing features and one of them is React Portals. Today we will be talking about React Portals which is a lesser used feature by most of the React developers but can be really amazing when you need them.

Developers often come across this common problem where css styles retrain your element, eg: stacking z-index and overflow-hidden. This can easily be solved by React Portals using which we can teleport the child element and render it inside a completely new DOM element.

What is a React Portal?

A React Portal provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Isn’t that great?

ReactDOM.createPortal(child, container)

Here, the first argument (child) is any React child that needs to be rendered, for example — an element, string, or fragment. The second argument (container) is the actual DOM element where you want the child to be rendered.

The most common use cases of Portal are when the parent component has an overflow: hidden or z-index style, but the child components need to break out visually of the parent container as shown below.

• Modal dialogs
• Hovercards
• Tooltips

Why Portals?

The best part about a Portal is that it can be anywhere in the DOM tree but behaves like a normal React child. So, all the powers of the React component apply to Portals as well.

Following are points to consider when using Portals:

• Event Bubbling will work as usual — Event bubbling will work as expected by propagating events to the React tree ancestors, regardless of the Portal node location in the DOM.Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.
• Control over lifecycle methods— React still has control over their lifecycle even when rendering child elements through Portals. A Parent component in #app-root would be able to catch an uncaught, bubbling event from the sibling node #modal-root.

How To Use Portals?

HTML

<div id="app-root"></div>
<div id="modal-root"></div>

JS

import React from "react";
import { createPortal } from "react-dom";
const modalRoot = document.getElementById("modal");
class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement("div");
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
  }
  componentWillUnmount() {
    //To avoid memory leaks we perform cleanup before Unmount
    modalRoot.removeChild(this.el);
  }
  render() {
    return createPortal(this.props.children, this.el);
  }
}
export default Modal;

Now , we will render the above created portal inside another component

<div onClick={this.handleClick}>
  <Modal>
    <Child/>
  </Modal>
</div>

As you can see in the above example, the Modal Component is a React Portal. The Child Component used inside Modal would not be rendered in the following hierarchy but it would be moved to “modal-root” div in the Actual DOM Tree. This new Actual DOM hierarchy can be checked by inspecting DOM in any browser. You can style it without worrying about the parent which is the main advantage of using this feature

React Portal Example

Summary

The Portal feature provides a clean escape to render components outside the actual DOM hierarchy, without breaking the event propagation’s default behaviour through the React component tree hierarchy. This is useful when rendering components such as modals, tooltips, popup messages etc.

You can find more information on Portals in the React official documentation.

Thank you for taking the time to read till the end. If you happen to stumble on this post and like it, please like or subscribe to encourage content writer to publish more of such content. It helps more than you can imagine.

Cheers!!