Widgets RefinementList

Description

The RefinementList component displays a list that let the end user choose multiple values for a specific facet.

Requirements

The attribute passed to the attribute prop must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting via a set settings call to the Algolia API.

If you are using the searchable prop, you’ll also need to make the attribute searchable using the dashboard or using the API.

Props

attribute*
type: string 

the name of the attribute in the record

searchable
type: booleandefault: false

true if the component should display an input to search for facet values.
In order to make this feature work, you need to make the attribute searchable using the API or the dashboard.

operator
type: stringdefault: or

How to apply the refinements. Possible values: ‘or’ or ‘and’.

showMore
type: booleandefault: false

true if the component should display a button that will expand the number of items

limit
type: numberdefault: 10

the minimum number of displayed items

showMoreLimit
type: numberdefault: 20

the maximum number of displayed items. Only used when showMore is set to true

defaultRefinement
type: string[] 

the values of the items selected by default

transformItems
type: function 

Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.

Example usage

import React from 'react'; import { InstantSearch, RefinementList } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <RefinementList attribute="brand" /> </InstantSearch> );

CSS classes

.ais-RefinementList {}

the root div of the widget

.ais-RefinementList--noRefinement {}

the root div of the widget when there is no refinement

.ais-RefinementList-searchBox {}

the search box of the widget. See the SearchBox documentation for the classnames and translation keys of the SearchBox.

.ais-RefinementList-list {}

the list of refinement items

.ais-RefinementList-item {}

the refinement list item

.ais-RefinementList-item--selected {}

the refinement selected list item

.ais-RefinementList-label {}

the label of each refinement item

.ais-RefinementList-checkbox {}

the checkbox input of each refinement item

.ais-RefinementList-labelText {}

the label text of each refinement item

.ais-RefinementList-count {}

the count of values for each item

.ais-RefinementList-noResults {}

the div displayed when there are no results

.ais-RefinementList-showMore {}

the button used to display more categories

.ais-RefinementList-showMore--disabled {}

the disabled button used to display more categories

Translation keys

showMore

The label of the show more button. Accepts one parameters, a boolean that is true if the values are expanded

noResults

The label of the no results text when no search for facet values results are found.