React Portal Basics

December 22, 2018

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

Related Articles

• ← Diagrams With Mermaid
• Hello Gin →