InstantSearch / React / V6 / API reference

RelevantSort | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

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?