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

Shared UI components lib

import { useNavigate } from 'react-router-dom';

import { getProductClassName } from '@redocly/theme/components/Product/utils';

import { useThemeHooks } from './use-theme-hooks';
import { withPathPrefix } from '../utils';

export function useProductPicker() {
  const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();
  const currentProduct = useCurrentProduct();
  const products = useProducts();
  const telemetry = useTelemetry();
  const navigate = useNavigate();
  const loadAndNavigate = useLoadAndNavigate();
  function setProduct(product: typeof currentProduct) {
    if (!product) return;
    telemetry.sendProductPickedMessage([{ object: 'product', product: product.slug }]);
    if (typeof document === 'undefined') return;

    if (product.name) {
      const root = document.documentElement;
      Array.from(root.classList)
        .filter((c) => c.startsWith('product-'))
        .forEach((c) => root.classList.remove(c));
      root.classList.add(getProductClassName(product.name));
    }

    loadAndNavigate({ navigate, to: withPathPrefix(product.link) });
  }
  return {
    currentProduct,
    products,
    setProduct,
  };
}