Widgets SortBy


The SortBy component displays a list of indexes allowing a user to change the hits are sorting.


Algolia handles sorting by creating replica indices. Read more about sorting on the Algolia website.


type: {value: string, label: string}[] 

The list of indexes to search in.

type: string 

The default selected index.

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, SortBy } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <SortBy defaultRefinement="instant_search" items={[ { value: 'instant_search', label: 'Featured' }, { value: 'instant_search_price_asc', label: 'Price asc.' }, { value: 'instant_search_price_desc', label: 'Price desc.' }, ]} /> </InstantSearch> );

CSS classes

.ais-SortBy {}

the root div of the widget

.ais-SortBy-select {}

the select

.ais-SortBy-option {}

the select option

Translation keys

This widget has no translations.