<Configure {...SearchParameters searchParameters} />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, Configure } from 'react-instantsearch-hooks-web';

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

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

1
2
3
4
5
<Configure
  analytics={false}
  filters="free_shipping:true"
  hitsPerPage={40}
/>

Hook

React InstantSearch Hooks 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.

Usage

First, create your React component:

import { useConfigure } from 'react-instantsearch-hooks-web';

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

  return null;
}

Then, render the widget:

<CustomConfigure {...searchParameters} />

Parameters

Hooks accept parameters. You can pass them manually, or forward the props from your custom component.

1
2
3
4
5
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.

Example

1
2
3
4
5
6
7
8
import React from 'react';
import { useConfigure } from 'react-instantsearch-hooks-web';

function CustomConfigure(props) {
  useConfigure(props);

  return null;
}

1
2
3
4
5
6
7
8
import React from 'react';
import { useConfigure, UseConfigureProps } from 'react-instantsearch-hooks-web';

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

  return null;
}