Instantsearch.js: hits-per-page-selector as buttons

[SchmidtDawid]

Hi!
I need to create 2 buttons switching between 2 values of hits per page. Is it even possible? And if yes, how to make buttons like that?

I want to have 2 buttons. One with 24 hits per page and one with 96 hits per page. Not <select>.

[Haroenv]

// custom `renderFn` to render the custom HitsPerPage widget
function renderFn(HitsPerPageRenderingOptions, isFirstRendering) {
  var containerNode = HitsPerPageRenderingOptions.widgetParams.containerNode;
  var items = HitsPerPageRenderingOptions.items;
  var refine = HitsPerPageRenderingOptions.refine;

  const itemsHTML = items.map(({ value, label, isRefined }) => {
    const button = document.createElement("button");
    button.addEventListener("click", () => refine(value));
    button.className = isRefined ? "refined" : "";
    button.textContent = label + (isRefined ? " (selected)" : "");
    return button;
  });

  containerNode.innerText = "";
  itemsHTML.forEach(item => containerNode.appendChild(item));
}

// connect `renderFn` to HitsPerPage logic
var customHitsPerPage = instantsearch.connectors.connectHitsPerPage(renderFn);

// mount widget on the page
search.addWidget(
  customHitsPerPage({
    containerNode: document.getElementById("custom-hits-per-page-container"),
    items: [
      { value: 24, label: "24 per page", default: true },
      { value: 96, label: "96 per page" },
    ],
  })
);

see also the docs (especially the example at the bottom) here. I also made this into a demo: here

[SchmidtDawid]

Wow. Thank you so much. It works great!