Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

boundless-portal

enigma-io42MIT1.1.0

A higher-order component for the rendering of components outside the normal React tree.

react, hoc, portal, boundless

readme

THIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.

Portal

A higher-order component for the rendering of components outside the normal React tree.

Portal is used in other components such as Popover to render content to places like the HTML <body> tag, avoiding style leakage and parent layout contexts. Only accepts a single top-level child; naked text, etc will be wrapped in a <div>.

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props

<tr>
    <td>children</td>
    <td><pre><code>any renderable</code></pre></td>
    <td><pre><code class="language-js">null</code></pre></td>
    <td>any normal React child, but must be singular; multiple sibling children must have a common wrapper, such as a "layout" `<div>`

✅ OK:

<Portal>
  foo
</Portal>

<Portal>
  <div>foo</div>
</Portal>

<Portal>
  <div>
      <div>foo</div>
      <div>bar</div>
  </div>
</Portal>

⛔️ Not OK:

jsx <Portal> <div>foo</div> <div>bar</div> </Portal> 

<tr>
    <td>destination</td>
    <td><pre><code>HTMLElement</code></pre></td>
    <td><pre><code class="language-js">document.body</code></pre></td>
    <td>the location to append the generated portal and child elements</td>
</tr>

<tr>
    <td>portalId</td>
    <td><pre><code>string</code></pre></td>
    <td><pre><code class="language-js">null</code></pre></td>
    <td>the ID used to link the portal origin to the destination; added to generated `<div>` appended to the destination HTML node</td>
</tr>
Name Type Default Value Description

changelog