Forma 36

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

<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