Portal

Portal is a component that renders elements outside of the current DOM hierarchy.

Import

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

Copied!

Usage

Portal transfers elements to a different DOM hierarchy. By default, it transfers to the end of document.body. This is useful for preventing the influence of styles or visibility from parent elements.

Editable example

<Box bg="primary" color="white">
  This is Box
  <Portal>This text is portaled at the end of document.body</Portal>
</Box>

Copied!

Changing the Destination

To change the destination, set the ref of the destination to containerRef. By default, it transfers to the end of document.body.

Editable example

const containerRef = useRef<HTMLDivElement>(null)

return (
  <Box bg="primary" color="white">
    This is Box
    <Portal containerRef={containerRef}>
      This text is portaled at the Container
    </Portal>
    <Box ref={containerRef} bg="secondary" color="white">
      This is Container
    </Box>
  </Box>
)

Copied!

Nested Portals

Nested Portal components follow their parent Portal component.

Editable example

const containerRef = useRef<HTMLDivElement>(null)

return (
  <>
    <Portal containerRef={containerRef}>
      <Box bg="primary" color="white">
        This text is portaled at the Container
        <Portal>This text is attached to parent portal</Portal>
      </Box>
    </Portal>

    <Box ref={containerRef} bg="secondary" color="white">
      This is Container
    </Box>
  </>
)

Copied!

Changing the Destination of Nested Portals

Nested Portal components follow their parent Portal component. If you want to disable following the parent Portal component, set appendToParentPortal to false.

Editable example

const containerRef = useRef<HTMLDivElement>(null)

return (
  <>
    <Portal containerRef={containerRef}>
      <Box bg="primary" color="white">
        This text is portaled at the Container
        <Portal appendToParentPortal={false}>
          This text is portaled at the end of document.body
        </Portal>
      </Box>
    </Portal>

    <Box ref={containerRef} bg="secondary" color="white">
      This is Container
    </Box>
  </>
)

Copied!

Edit this page on GitHub

PreviousEmptyState NextFocusLock