No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Getting Started

  1. Add @sitecore-search/react to your project:
npm install --save @sitecore-search/react

@sitecore-search/react is a core package that provides:

  • query hooks that allow a developer to connect through the Sitecore Search API.
  • An interface to render widget types using React components
  • User interaction tracking
  1. Aditionally, you can install @sitecore-search/ui a headless components package for building Sitecore Search widgets like recommendation, preview search and search results with Sitecore Search SDK.
npm install --save @sitecore-search/ui
  1. Render a WidgetsProviderin the root of your application. WidgetsProvider is used to create a ReactQuery client behind the scenes to handle all the query related stuff.
import { WidgetsProvider } from "@sitecore-search/react"; const Root = () => { return ( <WidgetsProvider env='<environment>' customerKey='<customer key>' apiKey='<api key>' > <MyApp /> </WidgetsProvider> )};

Note: WidgetsProvider props can be get from Customer Engagement Console (CEC) app. For more information about how this props work, read this documentation

  1. Optional step. Apply the theme in the root of your application. You can use a default theme that we provide, or a customized theme that adheres to our theme's structure. Read Theme Usage to see the options.
import { WidgetsProvider } from "@sitecore-search/react"; import { createTheme } from "@sitecore-search/ui"; const Root = () => { const { style } = createTheme(); return ( <div style={style}> <WidgetsProvider env='<environment>' customerKey='<customer key>' apiKey='<api key>' > <MyApp /> </WidgetsProvider> </div> )};

Note: Templates and UI Components examples are using the theme.

  1. Create your own components using query hooks or use the SDK components following template documentation to build the widgets in your app.