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

# Configure

> Adds search parameters to your requests.

<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"}
<Configure {...searchParameters} />
```

## Import

```jsx JavaScript icon=code theme={"system"}
import { Configure } from "react-instantsearch";
```

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/?path=/story/basics-configure--force-1-hit-per-page" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

`<Configure>` is a renderless component that lets you forward [search parameters](/doc/api-reference/search-api-parameters) to Algolia.

Any prop you pass to this component is forwarded as a [search parameter](/doc/api-reference/search-api-parameters) to Algolia.

<Warning>
  Don't make the widget itself conditional, for example, in a ternary statement.
  Doing so creates an infinite loop.
</Warning>

<Tip>
  You can also create your own UI with [`useConfigure`](#hook).
</Tip>

## Examples

```jsx JavaScript icon=code theme={"system"}
import React from "react";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { InstantSearch, Configure } from "react-instantsearch";

const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <Configure
        analytics={false}
        filters="free_shipping:true"
        hitsPerPage={40}
      />
    </InstantSearch>
  );
}
```

## Props

<ParamField body="...searchParameters" type="SearchParameters">
  A list of [search parameters](/doc/api-reference/search-api-parameters) to enable.

  ```jsx JavaScript icon=code theme={"system"}
  <Configure analytics={false} filters="free_shipping:true" hitsPerPage={40} />;
  ```
</ParamField>

## Hook

React InstantSearch let you create your own UI for the `<Configure>` widget with `useConfigure`.
Hooks provide APIs to access the widget state and interact with InstantSearch.

The `useConfigure` Hook accepts [parameters](#parameters) and returns [APIs](#hook).
It must be used inside the [`<InstantSearch>`](/doc/api-reference/widgets/instantsearch/react) component.

### Usage

First, create your React component:

```jsx JavaScript icon=code theme={"system"}
import { useConfigure } from "react-instantsearch";

function CustomConfigure(props) {
  const { refine } = useConfigure(props);

  return null;
}
```

Then, render the widget:

```jsx JavaScript icon=code theme={"system"}
<CustomConfigure {...searchParameters} />;
```

### Parameters

Hooks accept parameters. You can either pass them manually or forward props from a custom component.

<Note>
  When passing functions to Hooks, ensure stable references to prevent unnecessary re-renders.
  Use [`useCallback()`](https://reactjs.org/docs/hooks-reference.html#usecallback) for memoization.
  Arrays and objects are automatically memoized.
</Note>

<ParamField body="...searchParameters" type="SearchParameters">
  A list of [search parameters](/doc/api-reference/search-api-parameters) to enable.
  It returns an object with a [`refine`](/doc/api-reference/widgets/configure/react#param-refine) function that you can use to replace the provided search parameters with new ones.

  ```jsx JavaScript icon=code theme={"system"}
  const configureApi = useConfigure({
    hitsPerPage: 4,
    analytics: false,
    distinct: true,
  });
  ```
</ParamField>

### APIs

Hooks return APIs, such as state and functions. You can use them to build your UI and interact with React InstantSearch.

<ParamField body="refine" type="(value: SearchParameters) => void">
  Replaces the provided search parameters with new ones.

  ```jsx JavaScript icon=code theme={"system"}
  const { refine } = useConfigure({
    hitsPerPage: 4,
  });

  return (
    <button onClick={() => refine({ hitsPerPage: 8 })}>
      Show 8 hits per page
    </button>
  );
  ```
</ParamField>

### Example

<CodeGroup>
  ```jsx javascript theme={"system"}
  import React from "react";
  import { useConfigure } from "react-instantsearch";

  function CustomConfigure(props) {
    useConfigure(props);

    return null;
  }
  ```

  ```tsx TypeScript icon=code theme={"system"}
  import React from "react";
  import { useConfigure, UseConfigureProps } from "react-instantsearch";

  function CustomConfigure(props: UseConfigureProps) {
    useConfigure(props);

    return null;
  }
  ```
</CodeGroup>