# All files 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
    1122x
    1122x
    1122x
    40x
    40x
    1082x
    1082x
    1082x
     "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);
    }