Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Portal

Used to render an element outside the DOM hierarchy.

Usage

The Portal uses the ReactDOM.createPortal API to render an element at the end of document.body or specific container.

import { Portal } from "@chakra-ui/react"
<Portal>
  <div>Portal content</div>
</Portal>

Examples

Custom Container

Use the containerRef prop to render the portal in a custom container.

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

const Demo = () => {
  const containerRef = React.useRef()
  return (
    <>
      <Portal containerRef={containerRef}>
        <div>Portal content</div>
      </Portal>
      <div ref={containerRef} />
    </>
  )
}

Disabled

Use the disabled prop to disable the portal. This will render the children in the same DOM hierarchy.

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

const Demo = () => {
  return (
    <Portal disabled>
      <div>Will render the content in place</div>
    </Portal>
  )
}

Server Rendering

During SSR, the Portal component directly renders its content. If you run into any mismatch warnings, we recommended conditionally rendering the Portal component only on the client-side.

Props

PropDefaultType
container
RefObject<HTMLElement>

disabled
boolean

Previous

LocaleProvider

Next

Show