portal

1"use client";
2 
3import { Slot as SlotPrimitive } from "radix-ui";
4import * as React from "react";
5import * as ReactDOM from "react-dom";
6 
7type SlotProps = React.ComponentProps<typeof SlotPrimitive.Slot>;
8 
9interface PortalProps extends SlotProps {
10  container?: Element | DocumentFragment | null;
11}
12 
13function subscribe() {
14  return () => {};
15}
16 
17function getSnapshot() {
18  return true;
19}
20 
21function getServerSnapshot() {
22  return false;
23}
24 
25function Portal(props: PortalProps) {
26  const { container: containerProp, ...portalProps } = props;
27 
28  const mounted = React.useSyncExternalStore(
29    subscribe,
30    getSnapshot,
31    getServerSnapshot,
32  );
33 
34  const container =
35    containerProp ?? (mounted ? globalThis.document?.body : null);
36 
37  if (!container) return null;
38 
39  return ReactDOM.createPortal(
40    <SlotPrimitive.Slot {...portalProps} />,
41    container,
42  );
43}
44 
45export type { PortalProps };
46export { Portal };