ReactSearchKit
ReactSearchKit
is the base component that wraps your search application.
It provides state and configuration to the application.
Usage
<ReactSearchKit searchApi={searchApi}>
... React-SearchKit components ...
</ReactSearchKit>
See the complete guide for detailed information.
Props
searchApi
object
requiredAn instance of the adapter class for your search backend.
urlHandlerApi
object
optionalAn object containing configuration for handling URL parameters:
enabled
boolean
:true
if URL parameters should be updatedfalse
otherwise. Defaulttrue
.overrideConfig
object
:- keepHistory
boolean
:true
if each change of the URL parameters should push a new state to the browser history,false
if it should replace it instead. Defaulttrue
. - urlFilterSeparator
object
: a character(s) to override the default character defined inUrlHandlerApi
, used when separating child filters. - urlParamsMapping
object
: an object to override the default mapping defined inUrlHandlerApi
, used when serializing each query state field to an URL parameter. - urlParamValidator
object
: an object to override the default implementation ofUrlParamValidator
inUrlHandlerApi
. - urlParser
object
: an object to override the default implementation ofUrlParser
inUrlHandlerApi
.
- keepHistory
customHandler
object
: override entirely the default classUrlHandlerApi
.
searchOnInit
boolean
optionalA boolean to perform a search when the application is mounted. Default
true
.appName
string
optionalA name to uniquely identify the application. Useful when enabling the
event listener
(read below) and when multiple ReactSearchKit apps are loaded in the same page.The
overridable-id
of each component will be prefixed by thisappName
(see here). Default is empty string''
(no namespacing).eventListenerEnabled
boolean
optionalIf
true
the application listens to thequeryChanged
event else iffalse
no listener is registered. When this event is emitted the application triggers a search based on the payload that is passed to the event at the emission time. Defaultfalse
.overridableId
String
optionalAn optional string to define a specific overridable id.
initialQueryState
object
optionalSet the initial state of your ReactSearchKit application. It will be used to render each component with these default selected values and to perform the first search query, if
searchOnInit
is set totrue
. The object keys must match the query state fields and the values must be valid values that correspond to the values passed to each parameters.defaultSortingOnEmptyQueryString
object
optionalIt is sometimes useful to automatically change the default sorting in case the query string is set or left empty. A typical case is when your app should return by default the most recent items when the user did not search for anything in particular, but it should instead return the best matching items when searching with a particular query string. When enabled, the behavior will be the following:
- if the user did not change sorting, the default sorting with an empty query string will be the one defined with this prop
defaultSortingOnEmptyQueryString
. - if the user did not change sorting, the default sorting with a query string will be the one defined with the prop
initialQueryState
. - if the user did change sorting and selected a value, then the user preference will be kept, independently of the presence or absence of the query string.
sortBy
string
: the query statesortBy
value to use on empty query string.sortOrder
string
: the query statesortOrder
value to use on empty query string.
- if the user did not change sorting, the default sorting with an empty query string will be the one defined with this prop