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 SearchProvider
s would be okay too. You shouldn't nest SearchProvider
s 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.
Name | Type | Default | Description |
---|---|---|---|
search | ProviderPipelineConfig | A pipeline configuration for search requests. | |
autocomplete | ProviderPipelineConfig | A pipeline configuration for autocomplete and typeahead requests. This is optional, by default we'll use an autocomplete pipeline. | |
searchOnLoad | boolean | Whether to search on initial load. | |
initialResponse | string | An initial search response in JSON format, useful for server-side rendering. | |
defaultFilter | string | A default filter to apply to all search requests. |
In addition to these extra props:
Name | Type | Default | Description |
---|---|---|---|
currency | string | USD | The currency code to use for any formatted price values. |
customClassNames | See styling | {} | Custom classNames to apply to the components. |
disableDefaultStyles | boolean | false | Whether to disable the default styling completely. This requires relying on either customClassNames or using element selectors. |
importantStyles | boolean | false | Whether the CSS styles should use !important to override any other styles. |
ratingMax | number | 5 | The maximum possible rating for any displayed ratings. |
theme | See styling | Custom theming to apply to the components. |
ProviderPipelineConfig
Name | Type | Default | Description |
---|---|---|---|
pipeline | Pipeline | Config which pipeline to use for search queries. | |
variables | Variables | A simple key -> value pair object used for every search request. It includes critical data such as the query, results per page, current page, etc. | |
config | Config | Define mapping between key/value pair params to be sent with each and every request. | |
fields | FieldDictionary | A configuration is used to map fields in your data to the required fields to display in the UI. | |
filters | ( FilterBuilder or RangeFilterBuilder )[] | A list of filters is used to navigate and find relevant results. |