API Reference / React InstantSearch Widgets / RelevantSort

RelevantSort

Widget signature 
<RelevantSort
  buttonTextComponent={function}
  // Optional parameter
  textComponent={function}
/>
See code examples
See Live example

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
type: function
Optional

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
type: function
Required

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}
/>

HTML output

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

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>We removed some search results to show you the most relevant ones</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See all results</span>
  </button>
</div>

<!-- or -->

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>Currently showing all results</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See relevant results</span>
  </button>
</div>

Customize the UI - connectRelevantSort

If you want to create your own UI of the RelevantSort widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

It’s a 3-step process:

// 1. Create a React component
const RelevantSort = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomRelevantSort = connectRelevantSort(RelevantSort);

// 3. Use your connected widget
<CustomRelevantSort />

See code examples

Create a React component

const RelevantSort = ({
  boolean isVirtualReplica,
  boolean isRelevantSorted,
  function refine,
  function buttonTextComponent,
  // Optional parameter
  function textComponent,
}) => {
  // return the DOM output
}

Provided Props

isVirtualReplica
type: boolean

Indicates whether the index is a virtual replica.
Copy 
1
2

const RelevantSort = ({ isVirtualReplica }) =>
  !isVirtualReplica ? null : <div>This index is a virtual replica.</div>;
isRelevantSorted
type: boolean

Indicates whether the search uses Relevant Sort.
Copy 
1
2
3

const RelevantSort = ({ isRelevantSorted }) => (
  <div>Showing {isRelevantSorted ? 'relevant' : 'all'} results.</div>
);
refine
type: function

Sets relevancyStrictness.
Copy 
1
2
3
4
5
6
7

const RelevantSort = ({ isRelevantSorted, refine }) => (
  // `0`: show all results
  // `undefined`: fall back to the value from the index config.
  <button onClick={() => refine(isRelevantSorted ? 0 : undefined)}>
    Show {isRelevantSorted ? 'all' : 'relevant'} results
  </button>
);
textComponent
type: function

The component that displays extra information.
Copy 
1
2
3
4
5
6
7

 const RelevantSort = ({ textComponent: TextComponent, isRelevantSorted }) => (
   <div>
     <div>
       {TextComponent && <TextComponent isRelevantSorted={isRelevantSorted} />}
     </div>
   </div>
 );
buttonTextComponent
type: function

The component that displays the inner button text.
Copy 
1
2
3
4
5
6
7

const RelevantSort = ({ buttonTextComponent: ButtonTextComponent, isRelevantSorted }) => (
  <div>
    <div>
      <ButtonTextComponent isRelevantSorted={isRelevantSorted} />
    </div>
  </div>
);

Create and instantiate your connected widget

const CustomRelevantSort = connectRelevantSort(RelevantSort)

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

Full example

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { connectRelevantSort } from 'react-instantsearch-dom';

const RelevantSort = ({
  isVirtualReplica,
  isRelevantSorted,
  buttonTextComponent: ButtonTextComponent,
  refine,
  // Optional parameter
  textComponent: TextComponent,
}) =>
  !isVirtualReplica ? null : (
    <div>
      <div>
        {TextComponent && <TextComponent isRelevantSorted={isRelevantSorted} />}
      </div>
      <button
        onClick={() => refine(isRelevantSorted ? 0 : undefined)}
      >
        <ButtonTextComponent isRelevantSorted={isRelevantSorted} />
      </button>
    </div>
  );

const CustomRelevantSort = connectRelevantSort(RelevantSort);

Did you find this page helpful?

React InstantSearch v6