boundless-portal
v1.1.0
Published
A higher-order component for the rendering of components outside the normal React tree.
Downloads
42
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:
<Portal>
<div>foo</div>
<div>bar</div>
</Portal>
```</td>
</tr>
<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>
</table>