InstantSearch / React / V6 / API reference

RelevantSort | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Signature

Signature 
<RelevantSort
  buttonTextComponent={function}
  // Optional parameter
  textComponent={function}
/>

About this widget

Virtual indices allow you to use Relevant sort, a sorting mechanism that favors relevancy over the attribute you’re sorting on. The RelevantSort widget displays the current search mode when searching in a virtual replica index, and allows users to switch between Relevant and regular sorting, which is more exhaustive and can return less relevant results.

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const TextComponent = ({ isRelevantSorted }) => (
  <p>
    {isRelevantSorted
      ? 'We removed some search results to show you the most relevant ones'
      : 'Currently showing all results'}
  </p>
);

const ButtonTextComponent = ({ isRelevantSorted }) => (
  <span>{isRelevantSorted ? 'See all results' : 'See relevant results'}</span>
);

<RelevantSort
  textComponent={TextComponent}
  buttonTextComponent={ButtonTextComponent}
/>

Props

textComponent

Optional
Type: function

The component that displays extra information.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12

const TextComponent = ({ isRelevantSorted }) => (
  <div>
    {isRelevantSorted
      ? 'We removed some search results to show you the most relevant ones'
      : 'Currently showing all results'}
  </div>
);

<RelevantSort
  // ...
  textComponent={TextComponent}
/>

buttonTextComponent

Required
Type: function

The component that displays the inner button text.

Copy 
1
2
3
4
5
6
7
8

const buttonTextComponent = ({ isRelevantSorted }) => (
  <div>{isRelevantSorted ? 'See all results' : 'See relevant results'}</div>
);

<RelevantSort
  // ...
  buttonTextComponent={ButtonTextComponent}
/>
Did you find this page helpful?