Portal

Creates and appends a DOM node to the end of document.body and renders a React tree into it. Useful for rendering a natural React element hierarchy with a different DOM hierarchy to prevent parent styles from clipping or hiding content (for popovers, dropdowns, and modals).

function Example() {  return (    <div style={{ height: 50, overflow: "auto" }}>      <div style={{ border: "solid 5px", padding: 20, marginLeft: 170 }}>        This is the React Root where the portal is rendered. You can see it has        clipped overflow, but the portal's styles are just fine.      </div>      <Portal>        <div          style={{            position: "absolute",            top: 20,            right: 20,            width: 200,            border: "solid 1px hsla(0, 0%, 0%, 0.25)",            boxShadow: "0px 2px 10px hsla(0, 0%, 0%, 0.25)",            padding: 20,            background: "#f0f0f0",            textAlign: "center",          }}        >          This is in the portal        </div>      </Portal>    </div>  );}

Installation

From the command line in your project directory, run npm install @reach/portal or yarn add @reach/portal. Then import the component:

npm install @reach/portal# oryarn add @reach/portal

import Portal from "@reach/portal";

Component API

Portal

Renders content inside of a portal at the end of the DOM tree.

Portal Props

Prop	Type	Required
`children`	node	true

Portal children

children: React.ReactNode

Any content you want to render inside of the portal.

<Portal>  <div>Stuff goes here</div></Portal>

Portal type

Type: string default: reach-portal

The DOM element type to render.