useRelevantSort

React Hook for switching between search modes, exhaustive or relevant sorting.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

About this Hook

The useRelevantSort Hook isn’t part of React InstantSearch, but you can make a custom version with useConnector and connectRelevantSort.

This Hook allows switching between relevant and exhaustive sorting when searching in virtual replica indices.

Examples

JavaScript

import { useConnector } from "react-instantsearch";
import connectRelevantSort from "instantsearch.js/es/connectors/relevant-sort/connectRelevantSort";

export function useRelevantSort(props) {
  return useConnector(connectRelevantSort, props);
}

export function RelevantSort(props) {
  const { isRelevantSorted, refine } = useRelevantSort(props);
  const relevancyStrictness = isRelevantSorted ? 0 : undefined;

  return (
    <button type="button" onClick={() => refine(relevancyStrictness)}>
      {isRelevantSorted ? "See all results" : "See relevant results"}
    </button>
  );
}

import { useConnector } from "react-instantsearch";
import connectRelevantSort from "instantsearch.js/es/connectors/relevant-sort/connectRelevantSort";

import type {
  RelevantSortConnectorParams,
  RelevantSortWidgetDescription,
} from "instantsearch.js/es/connectors/relevant-sort/connectRelevantSort";

export type UseRelevantSortProps = RelevantSortConnectorParams;

export function useRelevantSort(props?: UseRelevantSortProps) {
  return useConnector<
    RelevantSortConnectorParams,
    RelevantSortWidgetDescription
  >(connectRelevantSort, props);
}

export function RelevantSort(props: UseRelevantSortProps) {
  const { isRelevantSorted, refine } = useRelevantSort(props);
  const relevancyStrictness = isRelevantSorted ? 0 : undefined;

  return (
    <button type="button" onClick={() => refine(relevancyStrictness)}>
      {isRelevantSorted ? "See all results" : "See relevant results"}
    </button>
  );
}