Portal

• A Portal is a Radix UI Portal.
• It renders any React subtree outside of a React app.
• By default it appends the element to the document.body but can be altered to render inside a different node.

Basic usage

import { Portal, Button } from '@streamelements/frontend-ui';

<Portal.Root>
  <Button>Imma be rendered in the document body</Button>
</Portal.Root>

The example above will render a random button in the document body.

Combo with Slot

In a combination with Slot you can avoid having the default wrapper element from Radix and you can render your component solo.

import { Portal, Slot, Button, styled } from '@streamelements/frontend-ui';

export const PageOverlay = styled('div', {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  boxShadow: '0 0 0 8px inset $colors$uiSuccessMain',
  bgc: '$textPrimary50',
  color: '$textPrimaryMainInverted',
  zIndex: 200,
  display: 'grid',
  placeItems: 'center'
});

export function RunPortal() {
  const [open, setOpen] = React.useState(false);
  return <>
    <Button onClick={() => setOpen(true)}>Click to open a portal overlay</Button>
    {
      open && <Portal.Root asChild>
        <PageOverlay onClick={() => setOpen(false)} style={{ top: document.body.scrollTop }}>
          Click me to close me
        </PageOverlay>
      </Portal.Root>
    }
  </>
}

<RunPortal/>

Api

Root

Property	Type	Description
containerRef	ref	An optional ref to a different container where the portaled content should be appended.

Yoinked from Radix