useConnector

React Hook for using InstantSearch connectors in React components.

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.

Signature

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

Import

JavaScript

import { useConnector } from "react-instantsearch";

About this Hook

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

Use this for connecting your own connectors with React InstantSearch.

Examples

JavaScript

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

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

connector · Connector · required

The InstantSearch connector to use. To learn more, see Building a custom connector.

props · object

Props to pass to the InstantSearch widget.

additionalWidgetProperties · object

Adds other properties like $$widgetType to the instantiated widget.

Returns

...connectorApi · object

The connector API, such as state and functions.