Data Science

Defining Portals in React

Portals provide a way to render children into a DOM node that exists outside of the DOM hierarchy of the parent component
Normally, child components are mounted into the DOM of the nearest parent component
The following illustrates this notion:

render() {
  // React mounts a new div
  // and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

However, sometimes it’s useful to insert a child into a different location in the DOM
When using portals, React doesn't create a new div
Instead, it renders the children into domNode
Here, domNode is any valid DOM node
The following illustrates this notion:

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

Use Case of Portals

Typically, portals can be used when a parent component has:
- overflow: hidden
- z-index
We may need the child component to break out of its container
For example, dialogs, hovercards, and tooltips

Illustrating Portals in React

<!-- index.html -->
<html>
  <body>
    <div id="root"></div>
    <div id="portal-root"></div>
  </body>
</html>

// App.js
class App extends Component {
  render() {
    return(
      <div className="App">
        <PortalDemo />
      </div>
    )
  }
}

// PortalDemo.js
function PortalDemon() {
  return ReactDOM.createPortal(
    <h1>Hello World</h1>,
    document.getElementById('portal-root')
  )
}

<!-- Output -->
<html>
  <body>
    <div id="root">
      <div class="App"></div>
    </div>
    <div id="portal-root">
      <h1>Hello World</h1>
    </div>
  </body>
</html>

References

Refs

Error Boundaries