Portal

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

元の世界

ナツキ・スバル

<>
  <Text>元の世界</Text>
  <Portal>
    <Text>ナツキ・スバル</Text>
  </Portal>
</>

Usage

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

import { Portal } from "@/components/ui"

import { Portal } from "@workspaces/ui"

<Portal />

Change the destination

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

元の世界

ナツキ・スバル

エミリアたん

const containerRef = useRef<HTMLDivElement>(null)

return (
  <VStack>
    <Text>元の世界</Text>
    <Portal containerRef={containerRef}>
      <Text>ナツキ・スバル</Text>
    </Portal>
    <Box ref={containerRef} p="md" bg="bg.contrast" color="fg.contrast">
      <Text>エミリアたん</Text>
    </Box>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Disable portaling

To disable forwarding, set disabled to true.

元の世界

ナツキ・スバル

<>
  <Text>元の世界</Text>
  <Portal disabled>
    <Text>ナツキ・スバル</Text>
  </Portal>
</>

Props

Prop	Default	Type / Description
`containerRef`	-	`RefObject<HTMLElement \| null>` The `ref` to the component where the portal will be attached to.
`disabled`	-	`boolean` If `true`, the forwarding will be disabled.

Similar Components

For is a component used to loop over an array and render a component for each item.

Format is used to format dates, numbers, and bytes according to a specific locale.

Slot is a component that merges its props onto its immediate child.

ClientOnly is a component that renders its children only on the client side.

Show is a component that shows or hides its children based on a condition.

Used By Components & Hooks

Drawer is a component for a panel that appears from the edge of the screen.

Dropzone is a component used for uploading files via drag and drop.

FileButton is a button component used for users to select files.

FileInput is a component used for users to select files.

Loading is a component displayed during waiting times, such as when data is being loaded.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Popover is a component that floats around an element to display information.

Toggle is a component that has two states: on or off.

Tooltip is a component that displays short information, such as supplementary details for an element.