Skip to main content

Portal

Render children into document.body or a custom DOM container.

import { Portal } from '@gentleduck/primitives/portal'
import { Portal } from '@gentleduck/primitives/portal'

Usage

<Portal>
  <div className="modal">I'm rendered in document.body</div>
</Portal>
 
// Custom container
<Portal container={document.getElementById('my-container')}>
  <div>I'm rendered in #my-container</div>
</Portal>
<Portal>
  <div className="modal">I'm rendered in document.body</div>
</Portal>
 
// Custom container
<Portal container={document.getElementById('my-container')}>
  <div>I'm rendered in #my-container</div>
</Portal>

Props

PropTypeDefaultDescription
containerElement | DocumentFragment | nulldocument.bodyTarget container