@clerk/shared/dist/react/PortalProvider.d.ts

Internal package utils used by the Clerk SDKs

import React from "react";

//#region src/react/PortalProvider.d.ts
type PortalProviderProps = React.PropsWithChildren<{
  /**
   * Function that returns the container element where portals should be rendered.
   * This allows Clerk components to render inside external dialogs/popovers
   * (e.g., Radix Dialog, React Aria Components) instead of document.body.
   */
  getContainer: () => HTMLElement | null;
}>;
/**
 * UNSAFE_PortalProvider allows you to specify a custom container for Clerk floating UI elements
 * (popovers, modals, tooltips, etc.) that use portals.
 *
 * Only components within this provider will be affected. Components outside the provider
 * will continue to use the default document.body for portals.
 *
 * This is particularly useful when using Clerk components inside external UI libraries
 * like Radix Dialog or React Aria Components, where portaled elements need to render
 * within the dialog's container to remain interactable.
 *
 * @example
 * ```tsx
 * function Example() {
 *   const containerRef = useRef(null);
 *   return (
 *     <RadixDialog ref={containerRef}>
 *       <UNSAFE_PortalProvider getContainer={() => containerRef.current}>
 *         <UserButton />
 *       </UNSAFE_PortalProvider>
 *     </RadixDialog>
 *   );
 * }
 * ```
 */
declare const UNSAFE_PortalProvider: {
  ({
    children,
    getContainer
  }: PortalProviderProps): React.JSX.Element;
  displayName: string;
};
/**
 * Hook to get the current portal root container.
 * Returns the getContainer function from context if inside a PortalProvider,
 * otherwise returns a function that returns null (default behavior).
 */
declare const usePortalRoot: () => (() => HTMLElement | null);
//#endregion
export { UNSAFE_PortalProvider, usePortalRoot };