Skip to content
Home

PortalRoot

Info
Demos
Properties

Demos

PortalRoot

Do you see the red box?

<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>

BrowserTranslate

The BrowserTranslate helper prevents browser translation tools (e.g. Google Translate) from modifying form component content. It sets translate="no" on both the component itself and any portal-rendered content like dropdown lists.

import { BrowserTranslate } from '@dnb/eufemia/shared'
<BrowserTranslate off>
  <Dropdown
    label="Velg farge"
    data={['Rød', 'Blå', 'Grønn', 'Gul', 'Hvit', 'Svart']}
  />
</BrowserTranslate>