React - Facets Widget

Updated

The SearchStax Site Search solution offers a SearchstaxFacetsWidget component for React and Next.js. This widget displays the search facets.

Facet Selection and Order

Facet lists are configured and ordered on the Site Search Faceting Tab.

Usage 

<SearchstaxFacetsWidget
                facetingType="and"
                itemsPerPageDesktop={2}
                itemsPerPageMobile={3}
                specificFacets={undefined}
              ></SearchstaxFacetsWidget>

Note: UI Kits implementations support the beforeFacetsRender callback for facet value ordering. Hook binding can vary by package version, so use the package documentation for exact implementation details.

Props

  • facetingType – Type that determines how facets will behave: "and" | "or" | "showUnavailable" | "tabs"
  • itemsPerPageDesktop – default expanded facets for desktop
  • itemsPerPageMobile – default expanded facets for mobile
  • specificFacets – Optional string array of facet names that, if provided, will only render those facets.
  • beforeFacetsRender – callback that runs before facet values render. Use it to enforce chronological ordering for time-based values (for example, months or days of the week).
  • facetsTemplateDesktop – template override for desktop view
  • facetsTemplateMobile – template override for mobile view

Example

For a full example, see searchstax-ux-react.

Articles in this section