Portal

A component that renders its children into a new element at the end of the document.body.

Usage

Used to transport its children to a different part of the DOM tree, typically at the end of the document.body. This is particularly useful for UI elements like modals, tooltips, and popovers that need to break out of their parent's overflow and stacking context.

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

<Portal>
  <div>I am rendered at the end of document.body</div>
</Portal>

Examples

Custom Container

By default, the component renders into document.body. You can specify a custom container by passing a ref to the container prop.

Disabled

You can disable the portal using the disabled prop. When disabled, the children will be rendered at the location where the component is defined.

API Reference

Prop	Type	Default
container	`RefObject<HTMLElement>`	`document.body`
disabled	`boolean`	`false`