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.

Search Facets
A facet list component to filter results from a SearchResults widget.
Note: SearchFacets component needs to be within the context of a SearchResults widget.
It cannot be used in isolation.
The examples above describe how to use it.
Properties
Property NameDescriptionTypeRequired
facetsThe facets to showArray<SearchResponseFacet>true
Example

// First, import what we need from React SDK
  import { widget, useSearchResults, WidgetDataType } from '@sitecore-search/react';
  // Import our component
  import SearchFacets from "@/components/SearchFacets";

  // SearchFacets needs to be under the Search SDK context
  // To accomplish that, we need to create a widget using the
  // widget function and to get facet data we use useSearchResults hook.
  const SearchResultsWrapperComponent = () => {
  const {
      queryResult: {
        isLoading,
        data: {
          facet: facets = [],
        } = {},
      }
    } = useSearchResults();
    return ( <>
    {!isLoading && <SearchFacets facets={facets} />}
    </>);
  };

  // Convert the regular component to a compatible widget.
  const SearchResultsWrapperWidget = widget(
    SearchResultsWrapperComponent,
    WidgetDataType.SEARCH_RESULTS,
    'content'
   );

  // Then, we can use the widget
  function MyApp() {
    return (
      <WidgetsProvider {...CONFIG}>
        <SearchResultsWrapperWidget rfkId="rfkid_7" />
      </WidgetsProvider>
    );
  }

Installation
npx sc-search new-component -w -s styled -l typescript -n SearchFacets -o <destination/path>