Genarrative/packages/image-canvas-react/src/CanvasPortal.tsx

import { createContext, type ReactNode, useContext } from 'react';
import { createPortal } from 'react-dom';

const CanvasPortalRootContext = createContext<HTMLElement | null>(null);

export function CanvasPortalProvider({
  children,
  root,
}: {
  children: ReactNode;
  root: HTMLElement | null;
}) {
  return (
    <CanvasPortalRootContext.Provider value={root}>
      {children}
    </CanvasPortalRootContext.Provider>
  );
}

export function CanvasPortal({
  children,
  className = '',
  container,
}: {
  children: ReactNode;
  className?: string;
  container?: HTMLElement | null;
}) {
  const contextualRoot = useContext(CanvasPortalRootContext);
  const portalRoot =
    container ??
    contextualRoot ??
    (typeof document === 'undefined' ? null : document.body);
  if (!portalRoot) return <>{children}</>;
  return createPortal(
    <div className={`genarrative-image-canvas__portal ${className}`.trim()}>
      {children}
    </div>,
    portalRoot,
  );
}