@crustack/portal

Usage

Generate a Portal component that renders content into specified DOM elements. Use the defaultRoots option to define target elements for rendering. When no target is found, content falls back to rendering in the document body.

import { definePortal } from '@crustack/portal'

export const { Portal } = definePortal({
  // Try to render in a <dialog> element if any, otherwise in #root, or fallback to the body
  defaultRoots: ['dialog', '#root'],
})

Wrap your component in the Portal.


function MyComponent() {
  return (
    <Portal>
      <div>This content will render in the first available default root</div>
    </Portal>
  )
}

Use a different root element for this portal:


function MyComponent() {
  return (
    <Portal root="#root-element">
      <div>This content will render in the first available default root</div>
    </Portal>
  )
}

API Reference

👉 `definePortal`

Create a custom Portal component.

DefinePortalOptions

Prop	Type	Default
`defaultRoots?`	`Root[]`	-

👉 `Portal`

The component returned by definePortal. It renders its children into the specified root.

PortalProps

Prop	Type	Default
`root?`	`Root`	`document.body`
`children`	`ReactNode`	-