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.
-
The SEO widget component plays an active role when a page is published to add meta content. It does not require rendering. It is only added to the page.
-
Banner widget components and HTML block widget components are simple content widgets whose rendering is configured and populated in the CEC. They know how to render templates and data. Additional information is not required.
-
The generic widget component accepts an
rfkIdor widget data to render an experience.
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 |
|---|---|---|
|
|
object |
Actions or callbacks used by the widget to populate a request. Each widget type has its own list. |
|
|
object |
Request parameters populated by the widget. Each widget type has its own list. |
|
|
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.
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.
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.