Nondeterministic Programming Methodology

    instantsearch-negative-refinement-list
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    Negative refinement list for InstantSearch.js

    Allows you to exclude a refinement from the result set.

    Install

    Using npm:

    npm install instantsearch-negative-refinement-list

    or using yarn:

    yarn add instantsearch-negative-refinement-list

    Widget

    Usage

    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();

    Options

    container

    type: string | HTMLElement

    required: true

    The element to insert the widget into.

    This can be either a valid CSS Selector:

    sampleWidget({
      container: '#exclude',
      // ...
    });

    or an HTMLElement:

    sampleWidget({
      container: document.querySelector('#sample-widget'),
      // ...
    });

    attribute

    type: string[]

    required: true

    The name of the attribute to exclude from the results.

    sampleWidget({
      attribute: 'price',
      // ...
    });

    Connector

    Usage

    import { connectNegativeRefinementList } from 'instantsearch-sample-widget';
    
    // 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
      }),
    ]);

    Options

    items

    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('#custom-widget').innerHTML = children;
    };

    widgetParams

    type: object

    All original widget options forwarded to the render function.

    const renderSampleWidget = (renderOptions, isFirstRender) => {
      const { widgetParams } = renderOptions;
      widgetParams.container.innerHTML = '...';
    };
    
    // ...
    
    search.addWidgets([
      customSampleWidget({
        container: document.querySelector('#sample-widget'),
        // ...
      }),
    ]);

    Install

    npm i instantsearch-negative-refinement-list

    DownloadsWeekly Downloads

    0

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    70.2 kB

    Total Files

    29

    Last publish

    Collaborators

    • haroenv