Portal

Give feedback

Portal component can be used to render children in a DOM node outside of its parent component. It can be useful for rendering components that you don’t want to be clipped by their parent’s component. For example: modals, popovers, dropdown, etc.

Import

import { Portal } from '@contentful/f36-utils';

Example

Basic usage

Parent component content
<Flex>
  <Portal>
    <Flex
      style={{
        backgroundColor: 'gray',
      }}
    >
      Hi! I'm first in the document flow, but will be rendered at the end of the
      document!
    </Flex>
  </Portal>
  Parent component content
</Flex><Flex>
  <Portal>
    <Flex
      style={{
        backgroundColor: 'gray',
      }}
    >
      Hi! I'm first in the document flow, but will be rendered at the end of the
      document!
    </Flex>
  </Portal>
  Parent component content
</Flex>

Props (API reference)

Open in Storybook

Name	Type	Default
children required
container	Document HTMLElement Container element for Portal

Help improve this page

Read the contribution guide

Import

Example

Basic usage

Props (API reference)

Name

Type

Default

Help improve this page