portal

PreviousNext
Docs
diceuicomponent

Preview

Loading preview…
components/portal.tsx
"use client";

import { Slot, type SlotProps } from "@radix-ui/react-slot";
import * as React from "react";
import * as ReactDOM from "react-dom";

interface PortalProps extends SlotProps {
  container?: Element | DocumentFragment | null;
}

function Portal(props: PortalProps) {
  const { container: containerProp, ...portalProps } = props;

  const [mounted, setMounted] = React.useState(false);

  React.useLayoutEffect(() => setMounted(true), []);

  const container =
    containerProp ?? (mounted ? globalThis.document?.body : null);

  if (!container) return null;

  return ReactDOM.createPortal(<Slot {...portalProps} />, container);
}

export { Portal };

export type { PortalProps };

Installation

npx shadcn@latest add @diceui/portal

Usage

import { Portal } from "@/components/portal"
<Portal />