useAutocomplete()

About this Hook

The useAutocomplete Hook isn’t currently available in React InstantSearch Hooks, but you can make it yourself using useConnector() along with connectAutocomplete.

Refer to the connectAutocomplete documentation for the full API reference.

If you’re building an autocomplete, you should use the Autocomplete library which lets you build a full-featured, accessible autocomplete experience. This is the recommended way of building an autocomplete search with Algolia.

Guides What is Autocomplete?

Integrate Autocomplete with React InstantSearch Hooks

Using Autocomplete with React

See code examples

Examples

Copy

1
2
3
4
5
6
7
8
9
10
11
12
import { useConnector } from 'react-instantsearch-hooks-web';
import connectAutocomplete from 'instantsearch.js/es/connectors/autocomplete/connectAutocomplete';

export function useAutocomplete(props) {
  return useConnector(connectAutocomplete, props);
}

export function Autocomplete(props) {
  const { indices, currentRefinement, refine } = useAutocomplete(props);

  return <>{/* Your JSX */}</>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useConnector } from 'react-instantsearch-hooks-web';
import connectAutocomplete from 'instantsearch.js/es/connectors/autocomplete/connectAutocomplete';

import type {
  AutocompleteConnectorParams,
  AutocompleteWidgetDescription,
} from 'instantsearch.js/es/connectors/autocomplete/connectAutocomplete';

export type UseAutocompleteProps = AutocompleteConnectorParams;

export function useAutocomplete(props?: UseAutocompleteProps) {
  return useConnector<AutocompleteConnectorParams, AutocompleteWidgetDescription>(
    connectAutocomplete,
    props
  );
}

export function Autocomplete(props: UseAutocompleteProps) {
  const { indices, currentRefinement, refine } = useAutocomplete(props);

  return <>{/* Your JSX */}</>;
}

Did you find this page helpful?

useAutocomplete()

About this Hook

Examples

On this page