In InstantSearch.js, the
hidden parameter of the
panel widget is a function that is called on each render to determine if the panel should be hidden based on the render options. If the function returns
true, the CSS class
noRefinementRootis applied and the wrapper is hidden.
For example, the panel and its contained widgets (ie: a
refinementList) could be hidden if no hits are returned:
return options.results.nbHits === 0;
Although the InstantSearch.js
hidden parameter behavior is not currently available in the React InstantSearch
<Panel> widget, you can create a custom panel using the
connectCurrentRefinementsconnector to retrieve the current refinements for the attribute present in the panel.
You could also potentially take some inspiration from the
<ExpandablePanel>widget of the Ecommerce UI Template.
Alternately, for React InstantSearch Hooks, you could take a look at this custom widget
<FacetDropdown> which is implementing a similar behavior.
Please note that these customizations are out-of-scope for Support.