Using React Portals

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

Articles & Tutorials

Using React Portals to Render Children Outside the DOM Hierarchy (
Jan 14, 2019
Say we need to render a child element into a React application. Easy right? That child is mounted to the nearest DOM element and rendered inside of it as a result. But! What if we want to render that child outside of the div somewhere else?
  • Kingsley Silas
How to render modals in React (
Dec 20, 2018
Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the basics of React, you will…
  • Zubin Pratap
React v16.0 (
Sep 26, 2017
We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

Video Guides & Talks

Test React Portals (
Aug 07, 2018
How to Test React components that use React.createPortals
Use React Portals to build a Modal (
Jun 01, 2018
Learn how to build a modal with React Portal.
How you can use React Portals (
Apr 29, 2018
React portals let your component control any part of your app as if it was its own child element. Pretty neat.

Courses & Video Series

Building a React tooltip library (
Jul 22, 2018
Learn about React Portals while building an open source library for a react tooltip component.
  • Deepak Grover
  • Divyanshu Maithani
Level 2 React (
May 23, 2018
In this series, we dive into intermediate React concepts where you'll learn things like, how to use the React Context API, how to make a portal in React, how to use and understand render props as well as animated transitions and interactive animations in React.