Package Exports

@chakra-ui/portal
@chakra-ui/portal/dist/chakra-ui-portal.cjs.js
@chakra-ui/portal/dist/chakra-ui-portal.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/portal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@chakra-ui/portal

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

Installation

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 (
    <ThemeProvider>
      <CSSReset />
      <PortalManager>{/* Your app goes here  */}</PortalManager>
    </ThemeProvider>
  )
}

Basic usage

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

<div>
  <p>Welcome</p>
  <Portal>This text has been portaled</Portal>
</div>

Nested portals

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

<Portal>
  This is a portal.
  <Portal>This is a nested portal</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>
  </Portal>
</>