Displaying fewer items when the search query is blank (Instantsearch.js)

What would be the best way to show a different amount of results (hitsPerPage) or filter the results differently when the search query is empty? Using Instantsearch.js

I’d like to show only the first 5 items of my index when the query is blank, but increase this number to 20 when the user performs a search.

I’ve tried two different ways but couldn’t make it work:

  1. A rule that filters the results when the query is blank. The problem is that I have other widgets in other pages and I don’t want this rule to apply to them. So the question is, is there a way to enable/disable rules per widget?

  2. I tried to programmatically change hitsPerPage when the query is blank. I read the answers on this and this posts but they didn’t get me too far.

I’m using a very simple setup for my pages:

const searchClient = algoliasearch(
  'APPID',
  'MYAPIKEY'
);

const search = instantsearch({
  indexName: 'symbols_index',
  searchClient,
});

search.addWidgets([
  instantsearch.widgets.hits({
    container: '#search-results',
    cssClasses: {
    templates: {
      item: `
     <a href="#" class="symbol-link">
     {{ symbol }}
     </a>`
    }
  }),
  instantsearch.widgets.configure({
    hitsPerPage: 20,
  })
]);

search.start();

Answering my own question for future reference.
There’s this beautiful thin in Algolia rules called context.

I created a rule that applies a filter to my results when the search query is blank.

And used a context to only apply this rule on my homepage.

  instantsearch.widgets.configure({
        hitsPerPage: 20,
        ruleContexts: "homepage",
  })