React component used to render children outside the DOM hierarchy of the parent component

Usage no npm install needed!

<script type="module">
  import chakraUiPortal from 'https://cdn.skypack.dev/@chakra-ui/portal';



A wrapper for rendering components in React Portals, with support for nested portals and stacking.


yarn add @chakra-ui/portal

# or

npm i @chakra-ui/portal

Import components

import { Portal, PortalManager } from "@chakra-ui/portal"

Render the PortalManager once at the root of your application

function App() {
  return (
      <CSSReset />
      <PortalManager>{/* Your app goes here  */}</PortalManager>

Basic usage

Portals are render into the portal manager's node by default not document.body.

  <Portal>This text has been portaled</Portal>

Nested portals

Nesting portal can be very useful to build complex widgets like nested menu, popovers, modal, etc.

  This is a portal.
  <Portal>This is a nested portal</Portal>

Custom container

You can also portal elements into a custom containers. Simply pass a containerRef prop that points to the node of that element.

  <div ref={ref} />
  <Portal containerRef={ref}>
    <h1>Hello world</h1>