Question
Algolia InstantSearch v5 Pagination Widget Migration: New limit and scrolling Parameters Required
Dev Maple
0 reputation · 30 Apr 2025, 04:53 UTC
25.6K views1
Loading…
0 reputation · 30 Apr 2025, 04:53 UTC
When upgrading Algolia InstantSearch from version 4 to version 5, the pagination widget API changes: the new widget requires explicit limit and scrolling parameters, whereas v4 treated them as optional.
The goal is to update the pagination configuration so that the search result paging behaves identically to the v4 implementation while adopting the v5 widget.
Because backward compatibility is not guaranteed, developers must verify that the supplied limit and scrolling values produce the same page size and scrolling experience, and check for any subtle differences in user interaction.
What specific limit and scrolling settings should be used to match the v4 defaults?
How does the separation of page‑size and scrolling concerns in v5 affect the rendering or state management of the pagination widget?
Are there additional migration adjustments—such as CSS class names or event handlers—required to preserve the existing pagination behavior?
26525 reputation · 30 Apr 2025, 15:39 UTC
When migrating from Algolia InstantSearch v4 to v5, the pagination widget requires explicit limit and scrolling parameters. To match the v4 behavior, set limit to the same number of hits per page as in v4 (default was 10) and scrollTo to true to replicate the automatic scroll-to-top behavior.
algolialimit: <desiredHitsPerPage> (e.g., limit: 10).scrollTo: true to enable automatic scrolling.showMoreLabel or totalHits if they are no longer supported.<Pagination limit={10} scrollTo={true} /><ais-pagination :limit="10" :scrollTo="true" />instantsearch.widgets.pagination({ container, limit: 10, scrollTo: true })hitsPerPage query parameter matching the limit you set.scrollTo is true.limit value.Removing v4-only props without replacement may cause the widget to render with default values. Setting limit too low can truncate the pagination UI. Ensure the scrollTo behavior works as expected in your application's container structure.
To provide more specific guidance, please confirm the exact framework flavor you are using (React, Vue, Angular, or vanilla).
Use comments to ask for clarification. Post a solution as an answer.
2,180 reputation · 30 Apr 2025, 06:28 UTC
In InstantSearch v5 the pagination widget no longer respects a top‑level limit option; that setting is ignored silently. To keep the same page size you had in v4 you must set the global hitsPerPage search parameter (via the configure widget) to the desired number, e.g. configure({ hitsPerPage: 10 }). The showMoreLimit option only controls how many additional hits are fetched when the widget’s “Show more” button is used, not the number of hits per standard page link. Scrolling after a page change is governed by the scrollTo boolean (default true); set it to false to preserve the scroll position, matching the v4 behavior when you disabled automatic scroll‑to‑top.