@redocly/theme/src/core/hooks/use-theme-hooks.ts

Shared UI components lib

import { useContext } from 'react';

import type { ThemeHooks } from '../types/hooks';

import { ThemeDataContext } from '../contexts/ThemeDataContext';
import { useTelemetryFallback } from './use-telemetry-fallback';

const fallbacks = {
  useAnchorPositioning: () => ({ isSupported: false }),
  useTranslate: () => ({
    translate: (value?: string, options?: { defaultValue: string } | string) =>
      (typeof options === 'string' ? options : options?.defaultValue) || value || '',
  }),
  useSubmitFeedback: () => ({ submitFeedback: () => {} }),
  useTelemetry: useTelemetryFallback,
  /**
   * @deprecated use `useTelemetry` instead
   **/
  useOtelTelemetry: () => ({ send: () => {} }),
  useBreadcrumbs: () => ({ breadcrumbs: [], siblings: undefined }),
  useBanner: () => ({ banner: undefined, dismissBanner: () => {} }),
  useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
  useUserMenu: () => ({}),
  usePageData: () => null,
  usePageProps: () => ({}),
  usePageSharedData: () => null,
  useMcpData: () => ({ docs: { enabled: false } }),
};

export const useThemeHooks = () => {
  const context = useContext(ThemeDataContext);

  return new Proxy({} as ThemeHooks, {
    get(_, prop) {
      if (context && prop in context.hooks) {
        return (context.hooks as Record<string, unknown>)[prop as string];
      } else if (prop in fallbacks) {
        return fallbacks[prop as keyof typeof fallbacks];
      } else {
        throw new Error(`Unknown hook ${prop.toString()}`);
      }
    },
  });
};