---
title: Portal
description: "`Portal`は、現在の`DOM`階層の外側に要素をレンダリングするコンポーネントです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/portal
---

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

## 使い方

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

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

```tsx
import { Portal } from "@workspaces/ui"
```

```tsx
<Portal />
```

### 転送先を変更する

転送先を変更する場合は、`containerRef`に転送先の`ref`を設定します。デフォルトでは、`document.body`の終わりに転送します。

```tsx
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>
)
```

### 転送を無効にする

転送を無効にする場合は、`disabled`を`true`に設定します。

```tsx
<>
  <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.                      |