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 --saveThen use it like:
;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 --savethe ES6 import statement then becomes like:
;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 attributeExpects Default Value anyn/a -
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>Expects Default Value any renderablenull -
destination· the location to append the generated portal and child elementsExpects Default Value HTMLElementdocument.body -
portalId· the ID used to link the portal origin to the destination; added to generated<div>appended to the destination HTML nodeExpects Default Value stringnull