Skip to main content
The Configure connector provides the logic to configure search parameters programmatically.

​
Usage

import { connectConfigure } from 'instantsearch.js/es/connectors';

const customConfigure = connectConfigure(
  () => {}
);

search.addWidgets([
  customConfigure({
    searchParameters: {
      hitsPerPage: 20,
      distinct: true,
      clickAnalytics: true,
    },
  }),
]);

​
Dynamic Configuration

You can dynamically update search parameters: 
const customConfigure = connectConfigure(
  (renderOptions, isFirstRender) => {
    const { refine, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    if (isFirstRender) {
      container.innerHTML = `
        <button id="toggle-distinct">Toggle Distinct</button>
      `;
      
      container.querySelector('#toggle-distinct').addEventListener('click', () => {
        refine({
          distinct: Math.random() > 0.5,
        });
      });
    }
  }
);

search.addWidgets([
  customConfigure({
    container: document.querySelector('#configure'),
    searchParameters: {
      hitsPerPage: 20,
    },
  }),
]);

​
Connector Options

​
searchParameters
object
required
A list of search parameters to enable when the widget mounts.You can pass any valid Algolia search parameter, such as:
  • hitsPerPage
  • distinct
  • clickAnalytics
  • analytics
  • getRankingInfo
  • facets
  • And many more…

​
Render Options

​
refine
(searchParameters: object) => void
Refines the given search parameters. The new parameters will be merged with the ones set from other widgets.
​
widgetParams
object
The options passed to the connector.