Skip to main content
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
<Configure {...searchParameters} />

​
Import

JavaScript
import { Configure } from "react-instantsearch";
View demo

​
About this widget

<Configure> is a renderless component that lets you forward search parameters to Algolia. Any prop you pass to this component is forwarded as a search parameter to Algolia.
Don’t make the widget itself conditional, for example, in a ternary statement. Doing so creates an infinite loop.
You can also create your own UI with useConfigure.

​
Examples

JavaScript
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

​
...searchParameters
SearchParameters
A list of search parameters to enable.
JavaScript
<Configure analytics={false} filters="free_shipping:true" hitsPerPage={40} />;

​
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 and returns APIs. It must be used inside the <InstantSearch> component.

​
Usage

First, create your React component:
JavaScript
import { useConfigure } from "react-instantsearch";

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

  return null;
}
Then, render the widget:
JavaScript
<CustomConfigure {...searchParameters} />;

​
Parameters

Hooks accept parameters. You can either pass them manually or forward props from a custom component.
When passing functions to Hooks, ensure stable references to prevent unnecessary re-renders. Use useCallback() for memoization. Arrays and objects are automatically memoized.
​
...searchParameters
SearchParameters
A list of search parameters to enable. It returns an object with a refine function that you can use to replace the provided search parameters with new ones.
JavaScript
const configureApi = useConfigure({
  hitsPerPage: 4,
  analytics: false,
  distinct: true,
});

​
APIs

Hooks return APIs, such as state and functions. You can use them to build your UI and interact with React InstantSearch.
​
refine
(value: SearchParameters) => void
Replaces the provided search parameters with new ones.
JavaScript
const { refine } = useConfigure({
  hitsPerPage: 4,
});

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

​
Example

import React from "react";
import { useConfigure } from "react-instantsearch";

function CustomConfigure(props) {
  useConfigure(props);

  return null;
}
⌘I