Skip to main content
The <CurrentRefinements> component displays a list of all currently active refinements with the ability to remove them.

​
Import

import { CurrentRefinements } from 'react-instantsearch';

​
Props

​
includedAttributes
string[]
Attributes to include in the list. By default, all refineable attributes are included.
<CurrentRefinements includedAttributes={['brand', 'category']} />
​
excludedAttributes
string[]
Attributes to exclude from the list.
<CurrentRefinements excludedAttributes={['query']} />
​
transformItems
function
Transform the refinement items before displaying them.
<CurrentRefinements
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import {
  InstantSearch,
  CurrentRefinements,
  RefinementList,
  SearchBox,
} from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <CurrentRefinements />
      <div className="filters">
        <RefinementList attribute="brand" />
        <RefinementList attribute="category" />
      </div>
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us