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

Shared UI components lib

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

import { useThemeHooks } from '@redocly/theme/core/hooks';

export function useProductPicker() {
  const { useCurrentProduct, useProducts, useOtelTelemetry, useLoadAndNavigate } = useThemeHooks();
  const currentProduct = useCurrentProduct();
  const products = useProducts();
  const otelTelemetry = useOtelTelemetry();
  const navigate = useNavigate();
  const loadAndNavigate = useLoadAndNavigate();
  function setProduct(product: typeof currentProduct) {
    if (!product) return;
    otelTelemetry.send({ type: 'product.picked', payload: { product: product.slug } });
    loadAndNavigate({ navigate, to: product.link });
  }
  return {
    currentProduct,
    products,
    setProduct,
  };
}