widgets hitsPerPage

Description

The hitsPerPage widget gives the user the ability to change the number of results displayed in the hits widget.

You can specify the default hits per page using a boolean in the items[] array. If none is specified, this first hits per page option will be picked.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.hitsPerPage({ 
  items: Array<HitsPerPageWidgetOptionsItem>, 
  transformItems: [(Array<object>) => Array<object>], 
}: HitsPerPageWidgetOptions);

search.addWidget(widget);

Options

HitsPerPageWidgetOptions

• itemsArray<HitsPerPageWidgetOptionsItem>

  Array of objects defining the different values and labels.

• transformItems[(Array<object>) => Array<object>]

  Function to transform the items passed to the templates.

HitsPerPageWidgetOptionsItem

• valuenumber

  Number of hits to display per page.

• labelstring

  Label to display in the option.

• defaultboolean

  The default hits per page on first search.

Widget

• render[function]

  Called after each search response has been received

• getConfiguration[function]

  Let the widget update the configuration of the search with new parameters

• init[function]

  Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.hitsPerPage({
    container: '#hits-per-page',
    items: [
      {value: 3, label: '3 per page', default: true},
      {value: 6, label: '6 per page'},
      {value: 12, label: '12 per page'},
    ]
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.