Portal
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>
.
Installation
npm i boundless-portal --save
Then use it like:
import Portal from 'boundless-portal';
Portal can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
import { Portal } from 'boundless';
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
-
*
· any React-supported attribute
-
children
· 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>
-
destination
· the location to append the generated portal and child elements
-
portalId
· the ID used to link the portal origin to the destination; added to generated <div>
appended to the destination HTML node