# @chakra-ui/portal

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

## Installation

```sh
yarn add @chakra-ui/portal

# or

npm i @chakra-ui/portal
```

## Import components

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

Render the `PortalManager` once at the root of your application

```jsx
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`.

```jsx
<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.

```jsx
<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.

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