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

function Example() {
  return (
    <Box bg='red.400' color='white'>
      I'm here,
      <Portal>This text is portaled at the end of document.body!</Portal>
    </Box>
  )
}

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.

function Example() {
  const ref = React.useRef()
  return (
    <Box bg='red.400' color='white'>
      I'm here,
      <Portal containerRef={ref}>
        Portal: This text is portaled to the yellow box!
      </Portal>
      <Box ref={ref} bg='yellow.500'>
        <div>Container: Hey,</div>
      </Box>
    </Box>
  )
}

Props#