Skip to main content

Pivotal UI

v18.1.1
Components / Portals

Portals

The Portal components render DOM nodes elsewhere on the page. This is useful for things like modals, tooltips, and dropdowns, when you want to define the content near the trigger, but have it display at the bottom of the page (generally to solve z-index and overflow incompatibilities).

For example, modals can be rendered at the bottom of <body>, but the React component that creates the modal content (e.g. a <button>) does not have access to <body> directly. If a PortalDestination is put at the bottom of <body>, a PortalSource can then be used anywhere without knowing about <body>.

Basic example
ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
nameyesStringUse same name to connect sources and destinations

Imports

Import React components (including CSS):

import {PortalSource, PortalDestination} from 'pivotal-ui/react/portals';