React Portals

Taking you to another dimension…

“Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.”

Normally, a functional or a class component renders a tree of React elements (usually generated from JSX). The React element defines how the DOM of the parent component should look. Normally, when you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node:

However, sometimes it’s useful to insert a child into a different location in the DOM:

Heres an example:

According to the React Docs:

“Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. 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.

This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree.”

Heres some examples of this, play around with it.

For more information, check out:

Related posts:

When you have a friend or a family member who is struggling with drug addiction, often staging an intervention can be an effective way to help them face their addiction and get help. The intervention…

Recently we went with some friends to a local museum showcasing local artists of whom the city of Zurich had bought pieces of their art. With one eye on young kids and the other trying to look at the…