Overlays

Portal

Renders its children somewhere else in the DOM — the escape hatch every overlay needs to get out from under `overflow: hidden` and a parent's stacking context.

Client componentSource

Import

import { Portal } from '@the_viveksingh/vivek-ui'

Render outside the tree

Escapes an ancestor overflow: hidden or transform, which is what breaks a positioned element inside a scrolling panel. Overlays use it internally.

This paragraph renders here, in the normal flow.

The note pinned to the corner of the viewport left this container entirely - that is what escapes an ancestor overflow or transform.

<Portal>
  <div style={{ position: 'fixed', bottom: '1rem', right: '1rem' }}>
    Portalled to document.body
  </div>
</Portal>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Portal
PropTypeDefaultDescription
containerPortalContainer—Mount point. Defaults to `document.body`. Passing a ref is supported and is usually what you want, since the element it points at typically renders in the same pass as the Portal.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering