@element-public/react-portal
v1.0.0
Published
Portal component for Element React
Downloads
3
Keywords
Readme
Portal
Description
Portal provides an easy way to render a child component outside of its parent component.
See live demos on storybook
Install bundle from npm-e
npm i @element-public/react-components @element-public/themes
Optional: install the component individually
npm i @element-public/react-portal @element-public/themes
Open ~/.npmrc
in an editor and add the following line to enable the @element-public
scope:
@element-public:registry=https://npm.platforms.engineering
Troubleshooting
See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:
npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR! npm login
Setup an access token
See the
devtools npm-e guide
to learn how to create an access token if this is the first time you are using a
npm-e package at Bayer or you do not have a line that starts with the following
in your ~/.npmrc
file:
//npm.platforms.engineering/:_authToken=
Notes
Portal is used for rendering content outside of its parent component, to improve readability and allow for smoother navigation.
Some important props for Portal include portalContainer
, which is a DOM element for children to render in, and children
, which represents the content to be rendered. If hoisted is true and portalContainer
is undefined, it defaults to render in document.body
, but only for React. In Vue, it will never render to document.body
, you have to add the Portal Target component to where you want it to render to.
Usage
Portal is commonly used with hoisted components, like Tooltip, for example.
Portal Props
| Name | Type | Default | Required | Description |
| --------------- | ----------------------- | --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | boolean | false | false | Disables the portal to rendering children in the natural flow of the DOM. |
| portalContainer | string|React.ReactNode | 'document.body' | false | The DOM element the children will render in. If a string is sent it should be a valid DOM query selector. If one is not sent, Portal will default to document.body
. |
Portal Render Props
| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ----------------------------------------- | | children | React.ReactNode | null | false | Content to be rendered inside the portal. |