RatingsFilter
creates a Ratings Filter UI component. It is used for filtering results based on a ratings score.
Example uses:
- filtering movie listings by their ratings.
- filtering items in an e-commerce search listing based on its ratings.
Usage
Basic Usage
<RatingsFilter
componentId="ratingsSensor"
dataField="ratings"
data={[
{ start: 4, end: 5, label: '4 & up' },
{ start: 3, end: 5, label: '3 & up' },
{ start: 1, end: 5, label: 'All' },
]}
/>
Usage With All Props
<RatingsFilter
componentId="CarCategorySensor"
dataField="ratings"
title="Ratings Filter"
data={[
{ start: 4, end: 5, label: '4 & up' },
{ start: 3, end: 5, label: '3 & up' },
{ start: 1, end: 5, label: 'All' },
]}
defaultValue={{
start: 4,
end: 5,
}}
URLParams={false}
includeNullValues
/>
Usage With Custom Icons
<RatingsFilter
componentId="RatingsSensor"
dataField="average_rating_rounded"
title="RatingsFilter"
icon={<Star style={{ color: 'yellow' }} />}
dimmedIcon={<Star style={{ color: 'grey' }} />}
data={[
{ start: 4, end: 5, label: '4 stars and up' },
{ start: 3, end: 5, label: '3 stars and up' },
{ start: 2, end: 5, label: '2 stars and up' },
{ start: 1, end: 5, label: '> 1 stars' },
]}
/>
Usage with Custom Data
Let's say you want data for ratings with 4 stars and up
and also include unrated results
<RatingsFilter
componentId="RatingsSensor"
dataField="average_rating_rounded"
title="RatingsFilter"
icon={<Star style={{ color: 'yellow' }} />}
dimmedIcon={<Star style={{ color: 'grey' }} />}
data={[
{ start: 4, end: 5, label: '4 stars and up', includeUnrated: true },
{ start: 3, end: 5, label: '3 stars and up' },
{ start: 2, end: 5, label: '2 stars and up' },
{ start: 1, end: 5, label: '> 1 stars' },
]}
/>
Props
- componentId
String
unique identifier of the component, can be referenced in other components'react
prop. - dataField
String
data field to be mapped with the component's UI view. - data
Object Array
collection of UIlabel
with associated withstart
andend
ratings values. - nestedField
String
[optional] use to set thenested
mapping field that allows arrays of objects to be indexed in a way that they can be queried independently of each other. Applicable only when dataField is a part ofnested
type. - title
String or JSX
[optional] title of the component to be shown in the UI. - icon
JSX
[optional] to render custom active icon. - dimmedIcon
JSX
[optional] to render custom inactive icon. - defaultValue
Object
[optional] selects a initial ratings value usingstart
andend
key values from one of the data elements. - value
Object
[optional] controls the current value of the component. It selects the item from the data (on mount and on update). Use this prop in conjunction withonChange
function. - onChange
function
[optional] is a callback function which accepts component's current value as a parameter. It is called when you are using thevalue
prop and the component's value changes. This prop is used to implement the controlled component behavior. - URLParams
Boolean
[optional] enable creating a URL query string parameter based on the selected rating. This is useful for sharing URLs with the component state. Defaults tofalse
. - includeNullValues
Boolean
[optional] If you have sparse data or document or items not having the value in the specified field or mapping, then this prop enables you to show that data. Defaults tofalse
.
Demo
Styles
RatingsFilter
component supports innerClass
prop with the following keys:
title
Read more about it here.
Extending
RatingsFilter
component can be extended to
- customize the look and feel with
className
,style
, - update the underlying DB query with
customQuery
, - connect with external interfaces using
beforeValueChange
,onValueChange
andonQueryChange
.
<RatingsFilter
...
className="custom-class"
style={{"paddingBottom": "10px"}}
customQuery={
function(value, props) {
return {
query: {
match: {
data_field: "this is a test"
}
}
}
}
}
beforeValueChange={
function(value) {
// called before the value is set
// returns a promise
return new Promise((resolve, reject) => {
// update state or component props
resolve()
// or reject()
})
}
}
onQueryChange={
function(prevQuery, nextQuery) {
// use the query with other js code
console.log('prevQuery', prevQuery);
console.log('nextQuery', nextQuery);
}
}
onValueChange={
function(value) {
console.log("current value: ", value)
// set the state
// use the value with other js code
}
}
/>
-
className
String
CSS class to be injected on the component container. -
style
Object
CSS styles to be applied to the RatingsFilter component. -
customQuery
Function
takes value and props as parameters and returns the data query to be applied to the component, as defined in Elasticsearch Query DSL.Note:
customQuery is called on value changes in the RangeFilter component as long as the component is a part ofreact
dependency of at least one other component. -
beforeValueChange
Function
is a callback function which accepts component's future value as a parameter and returns a promise. It is called everytime before a component's value changes. The promise, if and when resolved, triggers the execution of the component's query and if rejected, kills the query execution. This method can act as a gatekeeper for query execution, since it only executes the query after the provided promise has been resolved.Note:
If you're using Reactivesearch version >=
3.3.7
,beforeValueChange
can also be defined as a synchronous function.value
is updated by default, unless you throw anError
to reject the update. For example:beforeValueChange = values => { // The update is accepted by default if (values[0] < 4) { // To reject the update, throw an error throw Error('Rating must be greater than or equal to 4.'); } };
-
onValueChange
Function
is a callback function which accepts component's current value as a parameter. It is called everytime the component's value changes. This prop is handy in cases where you want to generate a side-effect on value selection. For example: You want to show a pop-up modal with the valid discount coupon code when a user searches for a product with a specific rating in a RatingsFilter. -
onQueryChange
Function
is a callback function which accepts component's prevQuery and nextQuery as parameters. It is called everytime the component's query changes. This prop is handy in cases where you want to generate a side-effect whenever the component's query would change. -
index
String
[optional] The index prop can be used to explicitly specify an index to query against for this component. It is suitable for use-cases where you want to fetch results from more than one index in a single ReactiveSearch API request. The default value for the index is set to theapp
prop defined in the ReactiveBase component.Note: This only works when
enableAppbase
prop is set to true inReactiveBase
.
Examples
See more stories for RatingsFilter on playground.