> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useConnector

> React Hook for using InstantSearch connectors in React components.

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

```tsx Signature theme={"system"}
const connectorApi = useConnector(
  connector: Connector,
  props: object,
  additionalWidgetProperties: object
)
```

## Import

```jsx JavaScript icon=code theme={"system"}
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](/doc/guides/building-search-ui/widgets/create-your-own-widgets/js#build-a-custom-connector)
with React InstantSearch.

## Examples

<CodeGroup>
  ```jsx JavaScript theme={"system"}
  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 */}</>;
  }
  ```

  ```tsx TypeScript theme={"system"}
  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 */}</>;
  }
  ```
</CodeGroup>

## Parameters

<ParamField body="connector" type="Connector" required>
  The InstantSearch connector to use.
  To learn more, see [Building a custom connector](/doc/guides/building-search-ui/widgets/create-your-own-widgets/react#build-a-custom-connector).
</ParamField>

<ParamField body="props" type="object">
  Props to pass to the InstantSearch widget.
</ParamField>

<ParamField body="additionalWidgetProperties" type="object">
  Adds other properties like `$$widgetType` to the instantiated widget.
</ParamField>

## Returns

<ResponseField name="...connectorApi" type="object">
  The connector API, such as state and functions.
</ResponseField>