React resources for your implementation

JS SDK for React

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

Component

In the SDK, a React component that initiates and coordinates all communication between the widget components and Search are referred to as components. The WidgetsProvider is such a component and wraps widget components. At runtime, it creates a ReactQuery singleton client. Widget components hook into this singleton for content or data using the rfk_id associated with the widget component.

Higher order functions

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

  • 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.

Widget components

The 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 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 widget.

Query hooks

To hook up with the ReactQuery singleton in WidgetProvider, a widget component uses one of the React hooks in the SDK. The widget component is also populated through the hook.

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.

state

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.

The SDK also provides complementary query hooks you can use to retrieve data for components that support widgets. For example, a list of widgets and breadcrumbs.

UI components CLI

To reduce errors and allow you to work only in your IDE, you can use Search UI components CLI. With the CLI, you can replicate widget templates from the UI components package directly in your application through your IDE terminal.

The UI Components reference lists components by entity type. All widget templates are available using the CLI for both Typescript and JavaScript React applications.

The Rapid development using UI components walkthrough series describes installation and use of the CLI.

Starter kit

The starter kit website is a functioning minisite built using the SDK and UI Components packages. On this site, you can see a variety of search experiences you can build. You can download the website from the GitHub repository and use it as a starter project or you can fork the repository and read the code behind the search experiences.

Sitecore developer portal

We have created Sitecore developer portal to enhance your developer experience by providing you direct access to the tools and information. The portal hosts a variety of videos.

Do you have some feedback for us?

If you have suggestions for improving this article,