Back to home

Why Portals?Creating a Portal
React Portal Basics main image

React Portal Basics

Why Portals?

A great use case for portals is for use with things like React modals. Anything that uses a stack context can obscure the css position for something like a modal.

The tl;dr is to make a React component a descendent of a HTML element other than id="root";

Creating a Portal

1 2 3 4 5 6 7 8 9 10 11 import React from "react"; import ReactDOM from "react-dom"; const Modal = (props) => { return ReactDOM.createPortal( <div className="modal"> <div className="modal-body" /> </div>, document.querySelector("#modal") ); };

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on workingoutloud.dev, Den Dribbles and LandPad .

Related articles


1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.