Portal

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

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

• Name

  children(required)
• Name

  container

  Description

  Container element for Portal

  Document

  HTMLElement