Hiding the pagination if there is only one page

Is your feature request related to a problem? Please describe 🙏 I’d like to hide the pagination when there is only one page of results. In that context, the pagination only adds clutter without meaningful interaction.

Describe the solution you’d like 🤔 Ideally I think a custom way of auto-hiding the container of widgets could be useful. I saw it was discussed already, and I think it might be useful for more than this widget.

Maybe something like autoHideContainer(params), where params are the search result response?

Describe alternatives you’ve considered ✨

I could listen to the helper.on('result') and hide the pagination wrapper when only one page is returned and display it when several pages are returned. This seems a bit hackish, adding widget-related logic outside of the widget itself.

I also tried to use connectPagination to add the needed branching logic there, but custom connectors are completely independent from the default widgets and there is no way to make them fallback to the default rendering method AFAIK.

I saw an old issue that suggest overwriting the widget .render method with a wrapper function. I’m unsure if this is still doable (the issue is 2+ years old)

ccing @Haroenv @bobylito as we discussed this

[francoischalifour]

You can now achieve this behavior with the panel widget in InstantSearch.js 3:

const pagination = instantsearch.widgets.panel({
  hidden: ({ results }) => results.nbPages === 1,
})(instantsearch.widgets.pagination);

search.addWidget(
  pagination({
    container: '#pagination',
  })
);

[francoischalifour]

@johnnybboiii In React InstantSearch you can rely on the ais-Pagination-noRefinement CSS class to hide the widget (see example).