useRecommendation

{
    widgetRef,
    actions: { onItemClick },
    state: { page },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
}

import { useRecommendation } from '@sitecore-search/react';

import type { RecommendationInitialState, RecommendationWidgetQuery } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';

type ArticleModel = {
  id: string;
  name: string;
  author?: string;
  url?: string;
  image_url?: string;
  source_id?: string;
};

type RecommendationProps = {
  title?: string;
  itemsToDisplay?: number;
};

type InitialState = RecommendationInitialState<'itemsPerPage'>;

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    query: (query:RecommendationWidgetQuery) => query,
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });

  const loading = isLoading || isFetching;

  return ( <div ref={widgetRef}> ... </div> );
};

const RecommendationBasicHorizontalStyledWidget = widget(RecommendationComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalStyledWidget;