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
A personal blog on all things of interest. Written by Dennis O'Keeffe, Follow me on Twitter