connectHitsPerPage

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

const customHitsPerPage = connectHitsPerPage(
  (renderOptions, isFirstRender) => {
    const { items, refine, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <select>
        ${items.map(item => `
          <option 
            value="${item.value}"
            ${item.isRefined ? 'selected' : ''}
          >
            ${item.label}
          </option>
        `).join('')}
      </select>
    `;
    
    container.querySelector('select').addEventListener('change', (e) => {
      refine(parseInt(e.target.value));
    });
  }
);

search.addWidgets([
  customHitsPerPage({
    container: document.querySelector('#hits-per-page'),
    items: [
      { label: '10 per page', value: 10, default: true },
      { label: '20 per page', value: 20 },
      { label: '50 per page', value: 50 },
    ],
  }),
]);