The Portal component in Chakra UI enables the rendering of React components or elements at the end of the document.body. This functionality ensures that the rendered content exists in a different DOM hierarchy, preventing parent styles from clipping or hiding the content. Additionally, thePortal component supports nested portals, which enables the creation of complex nested modals, popovers, and more.
The Portal component can be imported as follows:
Custom Container Portal
In this example, we have a Box component as the main container. Inside the Box, we have a Portal component with a custom container specified by the containerRef prop. The portal content will be rendered within the Box instead of the document.body, allowing for greater control over the rendering location.
In this example, we have a parent Portal component and a child Portal component nested within it. This nesting creates a hierarchical structure, allowing for the creation of complex UI components like nested modals. The child portal content will be rendered within the parent portal's DOM hierarchy.
Preventing Nested Portals