React SDK

SearchProvider

The SearchProvider should be used as a wrapper for the entire application to provide a way to share application state between components, for example, the current query, active filters or the search response.

Usage

It must wrap any components where you are using hooks, usually this is done in an App or index file. You must also specify the pipeline you wish to query.

  • Replace the placeholders with your account and collection IDs from the collection crendentials section in the console.
  • Replace the pipeline name placeholder with the pipeline you'd like to use to query.

Note

It is recommended that you only need to use SearchProvider once at the root of your application, if you find the need to use multiple collections then having multiple SearchProviders would be okay too. You shouldn't nest SearchProviders because each provider will create a separate new context which makes components beneath it (Pagination, Sorting) not behaving as they should.

Props

The SearchProvider exported by the @sajari/react-search-ui package extends the one exported by @sajari/react-hooks, which accepts the following props.

NameTypeDefaultDescription
searchProviderPipelineConfigA pipeline configuration for search requests.
autocompleteProviderPipelineConfigA pipeline configuration for autocomplete and typeahead requests. This is optional, by default we'll use an autocomplete pipeline.
searchOnLoadbooleanWhether to search on initial load.
initialResponsestringAn initial search response in JSON format, useful for server-side rendering.
defaultFilterstringA default filter to apply to all search requests.

In addition to these extra props:

NameTypeDefaultDescription
currencystringUSDThe currency code to use for any formatted price values.
customClassNamesSee styling{}Custom classNames to apply to the components.
disableDefaultStylesbooleanfalseWhether to disable the default styling completely. This requires relying on either customClassNames or using element selectors.
importantStylesbooleanfalseWhether the CSS styles should use !important to override any other styles.
ratingMaxnumber5The maximum possible rating for any displayed ratings.
themeSee stylingCustom theming to apply to the components.

ProviderPipelineConfig

NameTypeDefaultDescription
pipelinePipelineA pipeline configuration for search requests.
variablesVariablesA pipeline configuration for autocomplete and typeahead requests. This is optional, by default we'll use an autocomplete pipeline.
configConfigWhether to search on initial load. Note: if you're also calling the useSearch hook in your app, you'll make two search requests.
fieldsFieldDictionaryAn initial search response in JSON format, useful for server-side rendering.
filters(FilterBuilder or RangeFilterBuilder)[]