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