Portal

View .md

Renders content at the end of the document, outside the normal DOM tree.

Default

Loading interactive example. Full source is available below.

View example source
Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { Portal } from "@coreai-ds/react-components";
import { ToggleButton } from "@coreai-ds/react-components";

export const Default = () => {
    const [mountNode, setMountNode] = React.useState<HTMLElement | null>(null);
    const [open, setOpen] = React.useState(false);
    const styles = /* css */ `
      .portal-default-example__container {
        display: flex;
        gap: var(--spacingHorizontalS);
      }

      .portal-default-example__controls {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 200px;
      }

      .portal-default-example__state {
        font-family: var(--fontFamilyMonospace);
        border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
        padding: var(--spacingHorizontalXS);
        text-align: center;
      }

      .portal-default-example__clipping-container {
        font-family: var(--fontFamilyBase);
        font-size: var(--fontSizeBase400);
        font-weight: var(--fontWeightSemibold);
        line-height: var(--lineHeightBase400);
        background-color: var(--colorNeutralBackground1);
        color: var(--colorNeutralForeground1);
        border: var(--strokeWidthThick) solid var(--colorNeutralStroke1);
        padding: var(--spacingVerticalXXL) var(--spacingHorizontalS);
        overflow: hidden;
      }

      .portal-default-example__portal-content {
        font-family: var(--fontFamilyBase);
        font-size: var(--fontSizeBase500);
        font-weight: var(--fontWeightSemibold);
        line-height: var(--lineHeightBase500);
        background-color: var(--colorBrandBackground2);
        color: var(--colorBrandForeground2);
        border: var(--strokeWidthThick) dashed var(--colorBrandStroke2);
        padding: var(--spacingVerticalM) var(--spacingHorizontalSNudge);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="portal-default-example__container">
          <div className="portal-default-example__clipping-container">
            <span>Clipping parent container</span>

            {open && mountNode && (<Portal mountNode={mountNode}>
                <div className="portal-default-example__portal-content">Portal content</div>
              </Portal>)}
          </div>

          <div className="portal-default-example__controls">
            <ToggleButton checked={open} onClick={() => setOpen(!open)}>
              Toggle portal
            </ToggleButton>

            <code className="portal-default-example__state">
              {JSON.stringify({ open }, null, 2)}
            </code>
          </div>
        </div>

        <div ref={setMountNode}/>
      </>);
};

export default Default;
API referenceGenerated CoreAI prop and type summaries

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

Portal API

A portal provides a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

interface PortalProps {
  /**
   * React children
   */
  children?: ReactNode;

  /**
   * Where the portal children are mounted on DOM
   * @default a new element on document.body without any styling
   */
  mountNode?: HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined;
}

Implementation

CoreAI 0.12.0; Fluent 9.74.9.

Setup and dependencies.

Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.

Note: Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead.