Add support for nested portals

[cheton]

https://github.com/chakra-ui/chakra-ui/tree/main/packages/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>
</>