# Search JS SDK for React

> Search documentation for developers, in English.

- Product: Search
- Audience: Developers
- Language: English
- Status: Current
- Canonical URL: https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react

## Overview

- [Sitecore Search JS SDK for React](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/sitecore-search-js-sdk-for-react.md): Overview of Sitecore Search and Search JS SDK for React.

## Getting started

- [Prerequisites](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/getting-started/prerequisites.md): Prerequisites for using the Sitecore Search JS SDK for React.

## React resources for your implementation

- [React resources for your implementation](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/react-resources-for-your-implementation.md): Overview of Sitecore Search resources available for your React implementation.

## Rapid development using Search UI components walkthrough series

- [Rapid development using Search UI components walkthrough series](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series.md): Walkthrough series to integrate with Sitecore Search using JS SDK and UI components.
- [Set up the React project](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/set-up-the-react-project.md): How to authenticate with credentials using Sitecore Search JS SDK and components.
- [Creating widget components](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/walkthrough--creating-widget-components.md): How to edit the model in Sitecore Search widget components.
- [Tracking visitor interactions](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/walkthrough--tracking-visitor-interactions.md): How to use Sitecore Search JS SDK to track visitor interactions in your React application.
- [Adding widgets to the React application](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/walkthrough--adding-widgets-to-the-react-application.md): Walkthrough describing how to add widgets to your React application using Sitecore Search JS SDK..

## Development using custom UI components

- [Development using custom UI components](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/development-using-custom-ui-components.md): Overview of using Sitecore Search JS SDK to integrate with Search.

## Working with JS SDK and UI Components

- [Working with JS SDK and UI Components](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components.md): List of procedures to add widgets to host pages in Sitecore Search JS SDK for React.
- [Create an inventory of widgets](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/create-an-inventory-of-widgets.md): How to create an inventory of widgets before beginning integration with Sitecore Search.
- [Setting up the JS SDK in your React project](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/setting-up-the-js-sdk-in-your-react-project.md): Walkthrough to set up when integrating your React project using Sitecore Search JS SDK and components..
- [Authenticate without domain set up](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/authenticate-without-domain-set-up.md): How to authenticate without domain setup using Sitecore Search JS SDK and UI components.
- [Create and use a custom theme](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/create-and-use-a-custom-theme.md): How to create and use a custom theme using Sitecore Search JS SDK and UI components.
- [Create custom styled widget components](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/create-custom-styled-widget-components.md): Using custom styled merchandising widgets with Sitecore Search JS SDK and UI Components for React.
- [Edit the widget component model](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/edit-the-widget-component-model.md): How to edit the model in Sitecore Search widget components.
- [Customize facets in a search results widget](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/customize-facets-in-a-search-results-widget.md): How to override behavior and set initial values of facets of a search results widget using Sitecore Search JS SDK.
- [Override content widget configuration](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/override-content-widget-configuration.md): Overriding default configuration for content personalization widgets using Sitecore Search JS SDK and UI Components for React.
- [Track visitor interactions](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/track-visitor-interactions.md): How to use Sitecore Search JS SDK to track visitor interactions in your React application.
- [Use the logging utility from the JS SDK](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/use-the-logging-utility-from-the-js-sdk.md): How to use the logging utility in Sitecore Search JS SDK to monitor and debug requests and responses.

## JS SDK reference

- [Cookie](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/cookie.md): Describes the cookie Sitecore Search JS SDK for React adds to a visitor's browser to track event context.
- [Credentials for authentication](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/credentials-for-authentication.md): Details of the Credentials component in Sitecore Search JS SDK for React.
- [Widget templates](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/widget-templates.md): Overview of Sitecore Search widget templates in the JS SDK.
- [Context](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/context.md): Setting geo-location for requests using Sitecore Search JavaScript SDK for React.
- [Logger utility](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/logger-utility.md): Lists the acceptable values for the Logger utitlity in Sitecore Search JS SDK. Also includes screenshots.

### Providers

- [WidgetsProvider](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/providers/widgetsprovider.md): Details of WidgetsProvider, a root-level provider in Sitecore Search JS SDK for React.
- [OrderCloudSearchProvider](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/providers/ordercloudsearchprovider.md): Details of the OrderCloudSearchProvider component to use Sitecore Search JS SDK for React with Sitecore OrderCloud.

### Components

- [Widget](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/components/widget.md): Details of the generic Widget component in Sitecore Search JS SDK for React.
- [PageComponent](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/components/pagecomponent.md): Using the PageComponent to load to render widgets in Sitecore Search JS SDK for React.
- [HTMLBlockWidget](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/components/htmlblockwidget.md): Details of the HTMLBlockWidget component in Sitecore Search JS SDK for React.
- [BannerWidget](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/components/bannerwidget.md): Details of the BannerWidget component in Sitecore Search JS SDK for React.

### High order functions

- [setWidget](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/high-order-functions/setwidget-function.md): Details of the setWidget high order function in Sitecore Search JS SDK for React.
- [setWidgetType](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/high-order-functions/setwidgettype-function.md): Details of the setWidgetType high order function in Sitecore Search JS SDK for React.
- [widget](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/high-order-functions/widget-function.md): Details of the widget high order function in Sitecore Search JS SDK for React.

### Query hooks

- [Query hooks](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks.md): Details on using the query hooks in Sitecore Search JS SDK for React..
- [usePreviewSearch](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/usepreviewsearch.md): Details of the usePreviewSearch query hook in Sitecore Search JS SDK for React.
- [useSearchResults](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/usesearchresults.md): Details of the useSearchResults query hook in Sitecore Search JS SDK for React.
- [useRecommendation](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/userecommendation.md): Details of the useRecommendation query hook in Sitecore Search JS SDK for React.
- [useContentBlock](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/usecontentblock.md): Details of the useContentBlock query hook in Sitecore Search JS SDK for React..
- [Complementary query hooks](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/complementary-query-hooks.md): List of complementary query hooks in Sitecore Search JS SDK for React..

### Query

- [Query](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query.md): Details of the mutator methods of the Query object in Sitecore Search JS SDK for React.
- [Filter](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query/filter.md): List of objects offered by Sitecore Search JavaScript SDK for React.
- [Facets](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query/facets.md): Using facet objects in the Sitecore Search JS SDK to a request to narrow results for a keyphrase.

### Events

- [Events](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/events.md): List of events offered by Sitecore Search JS SDK for React to track user interaction.
- [Funnel events](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/events/funnel-events.md): Describes the entity payload used for tracking interactions with an entity.
- [Global events](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/events/global-events.md): Describes the entity payload used for tracking interactions with an entity.
- [Preview search widget events](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/events/preview-search-widget-events.md): Describes the entity payload used for tracking interactions with an entity.
- [Recommendation widget events](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/events/recommendation-widget-events.md): Describes the entity payload used for tracking interactions with an entity.
- [Search results widget events](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/events/search-results-widget-events.md): Describes the entity payload used for tracking interactions with an entity.

## UI components reference

- [Widget templates](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/widget-templates-1332963.md): Introducing widget templates in Search UI Components.

### Templates for content items

- [Basic preview search](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/preview-search/the-basic-preview-search-widget-template.md): Component variants and API reference of a basic preview search results widget template in Search UI Components. Includes CLI commands and code blocks.
- [Preview search with menu on the left](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/preview-search/the-preview-search-widget-with-menu-on-the-left.md): Component variants and API reference of a left search results widget template in Search UI Components. Includes CLI commands and code blocks.
- [Basic search results](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/search-results/the-basic-search-results-widget-template.md): Component variants and API reference of a basic search results widget template in Search UI Components. Includes CLI commands and code blocks.
- [Search results with layout options](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/search-results/the-search-results-widget-template-with-layout-options.md): Component variants and API reference of a search results widget template in a row grid layout in Search UI Components. Includes CLI commands and code blocks.
- [Search results with input field](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/search-results/the-search-results-widget-template-with-an-input-field.md): Component variants and API reference of a search results widget template with input field in Search UI Components. Includes CLI commands and code blocks.
- [Horizontal recommendation](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/recommendation/the-horizontal-recommendation-widget-template.md): Component variants and API reference of a horizontal recommendation widget template in Search UI Components. Includes CLI commands and code blocks.
- [Vertical recommendation](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/recommendation/the-vertical-recommendation-widget-template.md): Component variants and API reference of a vertical recommendation widget template in Search UI Components. Includes CLI commands and code blocks.
- [Carousel recommendation](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/recommendation/the-carousel-recommendation-widget-template.md): Component variants and API reference of a carousel recommendation widget template in Search UI Components. Includes CLI commands and code blocks.
- [Gallery recommendation](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/templates-for-content-items/recommendation/the-gallery-recommendation-widget-template.md): Component variants and API reference of a gallery recommendation widget template in Search UI Components. Includes CLI commands and code blocks.

### Theme and styles

- [Theme and styles](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/theme-and-styles.md)
- [Typography](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/theme-and-styles/typography.md): Predefined typographic values built into the default theme for Search UI Components.
- [CSS variables](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/theme-and-styles/css-variables.md): List of CSS variables you can use when styling Search UI Components using CSS and themes.
- [Colors](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/theme-and-styles/colors.md): Default CSS theme colors built into Search UI Components.
- [CSS variables](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/theme-and-styles/css-variables-1332976.md): List of CSS variables you can use when styling Search UI Components using CSS and themes.

### Primitive UI components

- [AccordionFacets](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/accordionfacets.md): Describes the anatomy, use and API reference of Search AccordionFacets primitive UI component.
- [ArticleCard](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/articlecard.md): Describes the anatomy, use and API reference of Search ArticleCard primitive UI component.
- [Breadcrumb](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/breadcrumb.md): Describes the anatomy, use and API reference of Search Breadcrumb primitive UI component.
- [CardViewSwitcher](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/cardviewswitcher.md): Describes the anatomy, use and API reference of Search CardViewSwitcher primitive UI component.
- [Carousel](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/carousel.md): Describes the anatomy, use and API reference of Search Carousel primitive UI component.
- [CollectionIndex](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/collectionindex.md): Describes the anatomy, use and API reference of Search CollectionIndex primitive UI component.
- [Pagination](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/pagination.md): Describes the anatomy, use and API reference of Search Pagination primitive UI component.
- [RangeFacet](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/rangefacet.md): Describes the anatomy, use and API reference of Search RangeFacet primitive UI component.
- [SortSelect](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/primitive-ui-components/sortselect.md): Describes the anatomy, use and API reference of Search SortSelect primitive UI component.

### UI utitlities

- [Highlight](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/ui-components-reference/ui-utitlities/highlight.md): Overview of the integration architecture and options when using Search, JS SDK for React.

## Optional

- [Full publication as Markdown](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/llms-full.txt): Every article in this publication in a single file.