Portal

Used to render an element outside the DOM hierarchy

This text is rendered here.

Usage

The Portal renders an element at the end of document.body or a specific container, so an ancestor’s overflow, transform or z-index cannot clip it or re-stack it.

import { Portal } from "chakra-ui-solid";

<Portal>
  <div>Portal content</div>
</Portal>

Examples

Custom Container

Use the container prop to render the portal in a custom container.

The prop takes an accessor rather than a ref object, so a signal-valued container moves the content when it changes.

Disabled

Use the disabled prop to disable the portal. This will render the children in the same DOM hierarchy.

Will render the content in place

Server Rendering

The Portal renders nothing on the server, and its content arrives when the page hydrates. Content that must appear in the served HTML should not be portalled.

Props

PortalProps
Prop	Default	Type
`children`	—	`JSX.Element`
`container`	—	`() => HTMLElement \| null \| undefined` Render into this element instead of `document.body`. Read on every render, so a signal-valued container moves the content.
`disabled`	`false`	`boolean` Render the children where they were written instead of portalling them.

Plus the three every component takes: as, render and unstyled.