Allows you to exclude a refinement from the result set.
Using npm:
npm install instantsearch-negative-refinement-list
or using yarn:
yarn add instantsearch-negative-refinement-list
import { negativeRefinementList } from 'instantsearch-negative-refinement-list';
const search = instantsearch({
indexName: 'indexName',
searchClient: algoliasearch('appId', 'apiKey'),
});
search.addWidgets([
negativeRefinementList({
container: '#exclude', // Name of the widget container,
attribute: 'brand', // Name of the attribute,
// Optional parameters
// ...
}),
]);
search.start();
type: string
| HTMLElement
required: true
The element to insert the widget into.
This can be either a valid CSS Selector:
negativeRefinementList({
container: '#exclude',
// ...
});
or an HTMLElement
:
negativeRefinementList({
container: document.querySelector('#negative-refinement-list'),
// ...
});
type: string[]
required: true
The name of the attribute to exclude from the results.
negativeRefinementList({
attribute: 'price',
// ...
});
import { connectNegativeRefinementList } from 'instantsearch-negative-refinement-list';
// 1. Create a render function
const renderNegativeRefinementList = (renderOptions, isFirstRender) => {
// Rendering logic
};
// 2. Create the custom widget
const customNegativeRefinementList = connectNegativeRefinementList(
renderNegativeRefinementList
);
// 3. Instantiate
search.addWidgets([
customNegativeRefinementList({
// instance params
}),
]);
type: object[]
The list of available items, with each item:
label: string
: the label of the item.value: string
: the value of the item.count: number
: the number results matching this value.isExcluded: boolean
: whether or not the item is selected.const renderList = (items) => `
<ul>
${items
.map(
(item) => `
<li>
${item.isExcluded ? 'x' : ''} ${item.label} (${item.count})</button>
</li>
`
)
.join('')}
</ul>
`;
const renderNegativeRefinementList = (renderOptions, isFirstRender) => {
const { items } = renderOptions;
const children = renderList(items);
document.querySelector('#negative-refinement-list').innerHTML = children;
};
type: object
All original widget options forwarded to the render function.
const renderNegativeRefinementList = (renderOptions, isFirstRender) => {
const { widgetParams } = renderOptions;
widgetParams.container.innerHTML = '...';
};
// ...
search.addWidgets([
customNegativeRefinementList({
container: document.querySelector('#negative-refinement-list'),
// ...
}),
]);