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 (css-tricks.com)
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 (medium.freecodecamp.org)
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 (reactjs.org)
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 (youtube.com)
Aug 07, 2018
How to Test React components that use React.createPortals
Use React Portals to build a Modal (youtube.com)
Jun 01, 2018
Learn how to build a modal with React Portal.
How you can use React Portals (youtube.com)
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 (youtube.com)
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 (leveluptutorials.com)
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.