#PortalRoot

#Import

import { PortalRoot } from '@dnb/eufemia'

#Description

PortalRoot is a React component that helps you make React Portals.

It is used in other components, like Tooltip and Dialog.

It adds dnb-core-style class to the portal element, so you don't need to deal with that yourself.

And in order to remove it from the accessibility tree, it uses role="presentation". That means, when your content is visible, you need to set focus to it, so screen readers can read it.

#Usage

For invisible text content:

import { PortalRoot } from '@dnb/eufemia'
render(<PortalRoot>Your content</PortalRoot>)

#Demos

<PortalRoot>
  <div
    style={{
      position: 'fixed',
      top: '16rem',
      right: '1rem',
      width: '8rem',
      height: '8rem',
      placeContent: 'center',
      textAlign: 'center',
      backgroundColor: 'red',
      zIndex: 4000,
    }}
  >
    <P>My content</P>
  </div>
</PortalRoot>
<P>Do you see the red box?</P>