The ClearRefinements connector provides the logic to build a custom widget that clears all currently applied refinements.
Usage
import { connectClearRefinements } from 'instantsearch.js/es/connectors';
const customClearRefinements = connectClearRefinements(
(renderOptions, isFirstRender) => {
const { refine, canRefine, widgetParams } = renderOptions;
const { container } = widgetParams;
container.innerHTML = `
<button ${!canRefine ? 'disabled' : ''}>
Clear all filters
</button>
`;
container.querySelector('button').addEventListener('click', () => {
refine();
});
}
);
search.addWidgets([
customClearRefinements({
container: document.querySelector('#clear-refinements'),
}),
]);
Connector Options
The attributes to include in the refinements to clear (all by default). Cannot be used with excludedAttributes.
excludedAttributes
string[]
default:"['query']"
The attributes to exclude from the refinements to clear. Cannot be used with includedAttributes.
transformItems
(items: string[]) => string[]
Function to transform the items passed to the templates.
Render Options
Triggers the clear of all currently refined values.
Indicates if search state can be refined.
Indicates if search state is refined.This parameter is deprecated. Use canRefine instead.
Creates a URL for the next state when refinements are cleared.
The options passed to the connector.