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

Understanding React Portals and Its Use-Cases (blog.bitsrc.io)
Nov 05, 2020
React Portal is a first-class way to render child components into a DOM node outside of the parent DOM hierarchy defined by the component tree hierarchy. The Portal's most common use cases are when the child components need to visually break out of the parent container as shown below.
  • Madushika Perera
React-cool-portal: What it is and how to use it (blog.logrocket.com)
May 08, 2020
react-cool-portal is a Hooks-based abstraction over React portals.
  • Yusuff Faruq
Better Modals in React (telerik.com)
Jan 27, 2020
Learn about how we can build fully customized, accessible, and better modals in React using a React API called Portals.
  • Leonardo Maldonado
Learn React Portals by example (blog.logrocket.com)
Dec 23, 2019
In this article, we’re going to take a look at a real world application for React Portals and explain how it can be helpful for solving the overflow:hidden problem on a tooltip example.
  • Alexander Solovyev
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

React Portal - Create a Modal popup with React and Typescript (youtube.com)
Aug 18, 2020
I show how to create a modal popup with React, Typescript and the NES.css library to spice things up.
  • Thomas Weibenfalk
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

Complete Intro to React, v5 (frontendmasters.com)
Jun 04, 2019
Learn to build real-world applications using modern React! Much more than an intro, you’ll start from the ground up, getting all the way to using the latest features in React, including hooks, effects, context, and portals.
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.