Portal Container Provider

The PortalContainerProvider can be used to change the default portal location for the app. This is automatically included in the CoreProviders but can be used anywhere in the app as well.

Custom Portal Container

If the portal location needs to be changed for react-md components for some reason, wrap that portion of the app in the PortalContainerProvider that sets the specific DOM node to render into.

"use client";

import { Box } from "@react-md/core/box/Box";
import { Button } from "@react-md/core/button/Button";
import { Portal } from "@react-md/core/portal/Portal";
import { PortalContainerProvider } from "@react-md/core/portal/PortalContainerProvider";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement, useRef } from "react";

export default function CustomPortalContainer(): ReactElement {
  const { toggled, toggle } = useToggle();
  const portalContainer = useRef<HTMLDivElement>(null);
  // the container could also be a result of:
  // - `document.getElementById`
  // - `document.querySelector`
  // - `document.body`
  // - etc.
  //
  // It just needs to be an `Element` or `DocumentFragment` for `createPortal`
  // to work

  return (
    <PortalContainerProvider container={portalContainer}>
      <Box stacked disablePadding>
        <Button onClick={toggle}>Toggle</Button>
        <div ref={portalContainer} />
      </Box>
      {toggled && (
        <Portal>This will always be rendered in the portalContainer</Portal>
      )}
    </PortalContainerProvider>
  );
}

"use client";

import { Box } from "@react-md/core/box/Box";
import { Button } from "@react-md/core/button/Button";
import { Portal } from "@react-md/core/portal/Portal";
import { PortalContainerProvider } from "@react-md/core/portal/PortalContainerProvider";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement, useRef } from "react";

export default function CustomPortalContainer(): ReactElement {
  const { toggled, toggle } = useToggle();
  const portalContainer = useRef<HTMLDivElement>(null);
  // the container could also be a result of:
  // - `document.getElementById`
  // - `document.querySelector`
  // - `document.body`
  // - etc.
  //
  // It just needs to be an `Element` or `DocumentFragment` for `createPortal`
  // to work

  return (
    <PortalContainerProvider container={portalContainer}>
      <Box stacked disablePadding>
        <Button onClick={toggle}>Toggle</Button>
        <div ref={portalContainer} />
      </Box>
      {toggled && (
        <Portal>This will always be rendered in the portalContainer</Portal>
      )}
    </PortalContainerProvider>
  );
}