# All files / src/portal Portal.tsx

100% Statements 46/46
100% Branches 5/5
100% Functions 1/1
100% Lines 46/46

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    471x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1137x
    1137x
    1137x
    40x
    40x
    1097x
    1097x
    1097x
     "use client";
    import { type ReactElement, type ReactNode } from "react";
    import { createPortal } from "react-dom";

    import { usePortalContainer } from "./PortalContainerProvider.js";

    export interface PortalProps {
      children: ReactNode;
      /**
       * Setting this to `true` will disable the portal behavior and just render
       * the `children` in the normal DOM tree.
       *
       * @defaultValue `false`
       */
      disabled?: boolean;
    }

    /**
     * **Client Component**
     *
     * Portals are a great way to render temporary elements like dialogs, tooltips,
     * and menus at a different port of the DOM. This implementation will render
     * the `children` in the current {@link PortalContainer} element.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { Portal } from "@react-md/portal";
     *
     * function Example() {
     *   return <Portal><div>Some Content</div></Portal>;
     * }
     * ```
     *
     * @see {@link PortalContainerProvider}
     * @see {@link usePortalContainer}
     */
    export function Portal(props: PortalProps): ReactElement {
      const { children, disabled = false } = props;
      const container = usePortalContainer();
      if (!container || disabled) {
        return <>{disabled && children}</>;
      }

      return createPortal(children, container);
    }