Portal

Used to render an element outside the DOM hierarchy.

Usage

The Portal uses the ReactDOM.createPortal API to render an element at the end of document.body or specific container.

import { Portal } from '@fidely-ui/react'

<Portal>
  <div>From Portal</div>
</Portal>

Custom Container

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

import { Portal } from '@fidely-ui/react/portal'

const Container = () => {
  const ref = React.useRef()
  return (
    <>
      <Portal container={ref}>
        <div>Portal content</div>
      </Portal>
      <div ref={containerRef} />
    </>
  )
}

Disabled

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

import { Portal } from '@fidely-ui/react/portal'

const Disabled = () => {
  return (
    <Portal disabled>
      <div>Portal disabled in place</div>
    </Portal>
  )
}

Props

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The underlying element to render.
`asChild`	`boolean`	false	Use the provided child element as the default rendered element.
`disabled`	`boolean`	—	-
`container`	`RefObject<HTMLElement \| null>`	null	The content to render on the server or before the client has mounted.