React resources for your implementation

This topic provides an overview of Sitecore Discover resources available for your React application.

The JS SDK package

The JS SDK package includes various components, function, query hooks and objects that you can use to rapidly integrate Discover experiences into your React applications. The following sections describe them and their role in your implementation.

Components

These components initiate and coordinate all communication between widget components on a page and Discover. It creates a ReactQuery singleton client. At runtime, widget components hook into this singleton to fetch content or data from Discover based on the rfk_id associated with the widget component.

High order functions

To make integration easy for developers, Sitecore Discover includes ready-to-use high order functions in the JS SDK for React.

  • widget - to configure UI components into a widget component.

  • setWidget - to create a widget component to match its CEC configuration.

  • setWidgetType - to create a generic widget component of a particular type.

  • withPageWidget - to render widgets based on host page URL.

Widget components

The JS SDK offers two functions, setWidget and widget, to convert UI components into widget components with an rfkId and a widget type. Widget components use query hooks to request and receive data.

You must use the above functions to create merchandising widget components built with headless UI components from the UI Components package or with your custom UI components. The SDK provides a query hook for each type of merchandising widget.

The SDK includes content personalization widget components and one generic widget component.

Query hooks

To populate and render merchandising widget components, the JS SDK offers React hooks to attach them to the ReactQuery singleton in WidgetProvider.

The following table describes a typical query hook in the SDK.

Key

Type

Description

actions

object

Actions or callbacks used by the widget to populate a request. Each widget type has its own list.

context

object

Request parameters populated by the widget. Each widget type has its own list.

queryResult

object

Contains the response object. A widget can only read its value.

Complementary query hooks retrieve data for components that support widgets. For example, a list of widgets and breadcrumbs.

The UI Components package

Discover provides front-end developers multiple widget templates and a set of UI components. Templates are components built with the UI components. The structure and content of a template reflect its expected behavioral pattern. You can query hook the templates using the JS SDK to display results.

Note

All the widget templates in the UI components package are built with default attributes. You may need to modify or alter a widget template to match your business and design needs.

To view the attributes of an entity, go to the Domain settings section of the CEC.

The widget templates and all headless UI components used in the templates are available in the UI Components package. By using the package, you can reduce your development time significantly. The headless components are also available styled. You can use our theme creator instead of a CSS preprocessor like SASS, to style and theme our UI components and templates.

Screenshot of a page on the UI components reference site.
Note

The use of the UI Components package is voluntary. You can choose to build your own UI components with or without our set of headless UI primitives.

The UI components CLI

To reduce errors and allow you to work only in your IDE, you can use Discover UI components CLI. After installing the CLI, you can replicate widget templates from the UI components package directly in the terminal by answering some questions

The starter kit

The starter kit website is a demo built using the JS SDK and UI Components packages. You can download or fork GitHub repository to read the code behind the search experiences.

Do you have some feedback for us?

If you have suggestions for improving this article,