@vtaits/filterlist v1.1.0

@vtaits/filterlist

Api reference

Util for creating lists with filters, sotring, paginatinon, endless scroll etc.

Installation

npm install @vtaits/filterlist --save

or

yarn add @vtaits/filterlist

Api

import { Filterlist } from '@vtaits/filterlist';

/*
 * assuming the API returns something like this:
 *   const json = {
 *     results: [
 *       {
 *         value: 1,
 *         label: 'Audi',
 *       },
 *       {
 *         value: 2,
 *         label: 'Mercedes',
 *       },
 *       {
 *         value: 3,
 *         label: 'BMW',
 *       },
 *     ],
 *     total: 50,
 *   };
 */

const filterlist = new Filterlist({
  loadItems: async ({
    page,
  }) => {
    const response = await fetch(`/awesome-api-url/?page=${page}`);
    const responseJSON = await response.json();

    return {
      items: responseJSON.results,
      total: responseJSON.total,
    };
  },
});

filterlist.emitter.on(eventTypes.changeListState, (nextListState) => {
  // change ui
  document.getElementById('loader').style.display = nextListState.loading ? 'block' : 'none';
});

// change the page
const changePage = (nextPage: number) => {
  filterlist.setPage(nextPage);
};

Events

emitter is the instance of mitt.

import { eventTypes } from '@vtaits/filterlist';

filterlist.emitter.on(eventTypes.changeListState, (listState) => {
  // ...
});

List of event types: