Skip to content

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).

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.

Installation

npm install @reach/portal
# or
yarn add @reach/portal

And then import it:

import Portal from "@reach/portal";

Portal Props

PropType
childrennode

Portal children

Type: node

Regular React children.

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

Portal type

Type: string default: reach-portal

The DOM element type to render.