Portal

Import#

import { Portal } from '@chakra-ui/react'

Usage#

Portal is used to transport any component or element to the end of document.body and renders a React tree into it.

Useful for rendering a natural React element hierarchy with a different DOM hierarchy to prevent parent styles from clipping or hiding content (for popovers, dropdowns, and modals). It supports nested portals

Using a custom container#

You can render the contents within a portal to a different DOM node, instead of the default document.body. Pass the containerRef prop and set its value to the ref of the container you'd like to use.

Nesting Portals#

You can also nest multiple portals within themselves, this will create a nested DOM hierarchy to make it easy to create nested modals, popovers, etc.

Opting out of portal nesting#

In some cases, you might not want portal nodes to be nested to their parent portals. To opt out of this, pass appendToParentPortal and set it to false

Props#