Portal

Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。

元の世界

ナツキ・スバル

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

使い方

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

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

import { Portal } from "@workspaces/ui"

<Portal />

転送先を変更する

転送先を変更する場合は、containerRefに転送先のrefを設定します。デフォルトでは、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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

転送を無効にする

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

元の世界

ナツキ・スバル

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

Props

Prop	デフォルト	型 / 説明
`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.

類似のコンポーネント

Slotは、propsを子要素にマージするコンポーネントです。

Forは配列をループして各アイテムに対してコンポーネントをレンダリングするために使用されるコンポーネントです。

Formatは、日付・数値・バイトなどを特定のロケールに合わせてフォーマットするために使用されます。

Showは、条件に基づいて子要素を表示または非表示にするコンポーネントです。

ClientOnlyは、クライアントサイドでのみ子要素をレンダリングするコンポーネントです。

使用されているコンポーネント・フック

Drawerは、画面の端から表示されるパネルのコンポーネントです。

Dropzoneは、ファイルをドラッグアンドドロップでアップロードするために使用されるコンポーネントです。

FileButtonは、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。

FileInputは、ユーザーがファイルを選択するために使用されるコンポーネントです。

Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。

Tooltipは、要素の補足など短い情報を表示するコンポーネントです。