@diana-ui/portal
The Portal component uses React Portals to render a DOM element outside the DOM hierarchy of the parent element, namely as a child of the<body>
.This component was implemented for the
Popover
to be able to visibly overflow out of parents that have overflow-hidden
.
An example of this can be found when a Dropdown
(that used the Popover
) is rendered inside a Modal
.The
Portal
is absolutely positioned, just below its parent element and aligned on the left side. To calculate this position,
the parent element's position is used via the parentRef
prop.