🎉 I'm releasing 12 products in 12 months! If you love product, checkout my new blog workingoutloud.dev

Back to home

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

    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") ); };

    Personal image

    Dennis O'Keeffe

    • Melbourne, Australia

    Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
    I am currently working on Visibuild.


    Get fresh posts + news direct to your inbox.

    No spam. We only send you relevant content.

    React Portal Basics


    Share this post