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

Shared UI components lib

import { useContext } from 'react';

import type { ThemeHooks } from '@redocly/theme/core/types';

import { ThemeDataContext } from '@redocly/theme/core/contexts';

const fallbacks = {
  useTranslate: () => ({
    translate: (value?: string, options?: { defaultValue: string } | string) =>
      (typeof options === 'string' ? options : options?.defaultValue) || value || '',
  }),
  useSubmitFeedback: () => ({ submitFeedback: () => {} }),
  useTelemetry: () => ({ telemetry: () => {} }),
  useOtelTelemetry: () => ({ send: () => {} }),
  useBreadcrumbs: () => [],
  useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
  useUserMenu: () => ({}),
};

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

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