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>
</>