useConnector()

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

Signature

const connectorApi = useConnector(
  connector: Connector,
  props: object,
  additionalWidgetProperties: object
)

Import

Copy

1
import { useConnector } from 'react-instantsearch';

See code examples

About this Hook

A React Hook that lets you use an InstantSearch connector in a React component.

You can use this if you want to connect your own connectors to React InstantSearch.

Examples

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useConnector } from 'react-instantsearch';
import connectGeoSearch from 'instantsearch.js/es/connectors/geo-search/connectGeoSearch';

export function useGeoSearch(props, additionalWidgetProperties) {
  return useConnector(connectGeoSearch, props, additionalWidgetProperties);
}

export function GeoSearch(props) {
  const { items, refine } = useGeoSearch(props, {
    $$widgetType: 'my-organization.geoSearch'
  });

  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
23
24
25
26
27
28
29
import {
  useConnector,
  AdditionalWidgetProperties,
} from 'react-instantsearch';
import connectGeoSearch, {
  GeoSearchConnectorParams,
  GeoSearchWidgetDescription,
} from 'instantsearch.js/es/connectors/geo-search/connectGeoSearch';

export type UseGeoSearchProps = GeoSearchConnectorParams;

export function useGeoSearch(
  props: UseGeoSearchProps,
  additionalWidgetProperties: AdditionalWidgetProperties
) {
  return useConnector<GeoSearchConnectorParams, GeoSearchWidgetDescription>(
    connectGeoSearch,
    props,
    additionalWidgetProperties
  );
}

export function GeoSearch(props: UseGeoSearchProps) {
  const { items, refine } = useGeoSearch(props, {
    $$widgetType: 'my-organization.geoSearch',
  });

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

Parameters

Parameter	Description
`connector`	type: Connector Required The InstantSearch connector to use. To learn about the shape oa a `Connector`, see Building a custom connector.
`props`	type: object The props to pass to the InstantSearch widget.
`additionalWidgetProperties`	type: object Adds other properties like `$$widgetType` to the instantiated widget.

Returns

Parameter	Description
`...connectorApi`	type: object The connector API, such as state and functions.

Did you find this page helpful?

useConnector()

About this Hook

Examples

Parameters

Returns

On this page