useRecommendation

The useRecommendation hook returns the data and functionality to provides a way to perform content recommended.

Parameters

This hook accepts a single optional object parameter:

type RecommendationInitialState = {
    itemsPerPage?: number;
  }
Copy

{
  query?: (query: Query<Request>) => void, // method to init query request customized
  state?: {
    itemsPerPage?: RecommendationInitialState | () => RecommendationInitialState;
  }
}
Copy

Return Value

{
    // rfkId of the widget.
    rfkId,
    // Access to the widget query. This will make the query available on the widget scope.
    query,
    // Widget dom reference.
    widgetRef,
    // Actions available for this widget.
    actions: {
        onNavigationNext: ({ index: number }) => void, // Track navigation next event
        onNavigationPrev: ({ index: number }) => void, // Track navigation prev event
        onItemClick: ({ id: string, index: number }) => void // Track click product event
    },
    state: {
        // Here we destructure the state variables that we would like to obtain.
    },
    queryResult: {
        isLoading, // The query has no data and is currently fetching
        isError,// The query encountered an error
        isSuccess, // The query was successful and data is available
        isFetching, // In any state, if the query is fetching at any time (including background refetching) isFetching will be true.
        data: {
            { content: { items: [] } }
        } = {},
    },
}
Copy

Importing

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

Usage: Example for content entity

Basic example of how to use useRecommendation hook.

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

const MyApp = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<API key provided in CEC>'
            >
            <MyRecommendationWidget itemsToDisplay={4} />
        </WidgetsProvider>
)};

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

type InitialState = RecommendationInitialState<'itemsPerPage'>;
const MyRecommendationComponent = ({ itemsToDisplay = 6 }) => {
  const {
    widgetRef,
    actions: { onNavigationNext, onNavigationPrev, onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });

  return (
      <div ref={widgetRef}>
        // Logic here. Refer to Widget templates to see a complete example 
      </div>
   );
};

// Register the widget
const MyRecommendationWidget = widget(Recommendation, WidgetDataType.RECOMMENDATION, 'content');
Copy

Note: To make the hook available, the SDK needs the component to be registered. This can be made using the widget function. Where the first parameter for widget is the component itself, the second one a constant that indicates the widget type and the last one is the entity type. In this case the widget type constant is getting from WidgetDataType.RECOMMENDATION.