--- title: "React resources for your implementation" slug: "react-resources-for-your-implementation" abstract: "Overview of Sitecore Discover resources available for your implementation." --- # 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. - [WidgetsProvider](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/widgetsprovider.md "WidgetsProvider") - [PageWidgetsProvider](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/pagewidgetsprovider.md "PageWidgetsProvider") - [PageWidgets](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/pagewidgets.md "PageWidgets") ### 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`](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/widget-function.md "widget function") - to configure UI components into a widget component. - `[setWidget](setwidget-function.md "setWidget function")` - to create a widget component to match its CEC configuration. - `[setWidgetType](setwidgettype-function.md "setWidgetType function")` - to create a generic widget component of a particular type. - `[withPageWidget](withpagewidgets-function.md "withPageWidgets function")` - 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](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/widget.md "Widget"). - The [SEO widget component](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/seowidget.md "SEOWidget") 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](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/bannerwidget.md "BannerWidget") and [HTML block widget components](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/htmlblockwidget.md "HTMLBlockWidget") 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](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/widget.md "Widget") accepts an `rfkId` or widget data to render an experience. ### Query hooks To populate and render merchandising widget components, the JS SDK offers [React hooks](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/query-hooks.md "Query 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](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/complementary-query-hooks.md "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](https://doc.sitecore.com/discover/en/users/discover-user-guide/en/domain-settings.html) 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.](https://doc.sitecore.com/api/markdown-image/discover/en/developers/discover-js-sdk-for-react/images/storybook-snapshot.png) > [!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. On the [Discover UI components reference](https://developers.sitecorecloud.io/discover-sdk/react/latest/storybook/index.html?path=/docs/introduction--page) site, you can: - Access working examples of widget templates built with a set of primitive UI components. - View a template's structure and content, and how they reflect the widget's expected behavior. - Copy a template's React code to paste in your React application. - Learn to style a template with CSS variables. ## The UI components CLI To reduce errors and allow you to work only in your IDE, you can use Discover [UI components CLI](https://www.npmjs.com/package/@sitecore-discover/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](https://developers.sitecorecloud.io/discover-sdk/react/website) is a demo built using the JS SDK and UI Components packages. You can download or fork [GitHub repository](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit) to read the code behind the search experiences.