Package Exports

@chakra-ui/portal

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. No need to use z-index at all with this portal, that's right!

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.

It'll only render into document.body if you don't include PortalManager.

<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 container prop that points to the node of that element.

<>
  <div data-testid="container" ref={ref} />
  <Portal container={() => ref.current}>
    <h1 data-testid="heading">Hello world</h1>
  </Portal>
</>