@vtaits/react-filterlist

React wrapper above @vtaits/filterlist.

Sandbox examples

• Table with filters: demo, source

Installation

npm install @vtaits/filterlist @vtaits/react-filterlist --save

or

yarn add @vtaits/filterlist @vtaits/react-filterlist

or

bun add @vtaits/filterlist @vtaits/react-filterlist

Simple examples

1import { useFilterlist } from '@vtaits/react-filterlist';
2
3function List() {
4  const [listState, filterlist] = useFilterlist({
5    loadItems: async () => {
6      const response = await fetch('/cars');
7      const cars = await response.json();
8
9      return {
10        items: cars,
11				total: cars.length,
12      };
13    },
14  });
15
16  const {
17    items,
18    loading,
19    total,
20  } = listState;
21
22  return (
23    <div>
24      <table>
25        <thead>
26          <tr>
27            <th>id</th>
28            <th>brand</th>
29            <th>owner</th>
30            <th>color</th>
31          </tr>
32        </thead>
33
34        <tbody>
35          {
36            items.map(({
37              id,
38              brand,
39              owner,
40              color,
41            }) => (
42              <tr key={ id }>
43                <td>{ id }</td>
44                <td>{ brand }</td>
45                <td>{ owner }</td>
46                <td>{ color }</td>
47              </tr>
48            ))
49          }
50        </tbody>
51      </table>
52
53      {
54        typeof total === 'number' && (
55          <h4>
56            Total: {total}
57          </h4>
58        )
59      }
60
61      {
62        loading && (
63          <h3>Loading...</h3>
64        )
65      }
66    </div>
67  );
68};

Api

useFilterlist

1import { useFilterlist } from '@vtaits/react-filterlist';
2
3// ...
4
5const [requestParams, listState, filterlist] = useFilterlist({
6  ...options,
7  parseFiltersAndSort,
8  filtersAndSortData,
9  shouldRecount,
10  isRecountAsync,
11  onChangeLoadParams,
12  canInit,
13});

listState and filterlist are null during async init or when canInit is true

Params

• options - options of @vtaits/filterlist

• parseFiltersAndSort - function, receives filtersAndSortData as first argument, should return params for call filtersAndSortData method of @vtaits/filterlist

• filtersAndSortData - see above

• shouldRecount - function, called on every update of component. Receives new filtersAndSortData as first argument and old filtersAndSortData as second. If returns true, parseFiltersAndSort will called. By default checks equality with === operator

• isRecountAsync - boolean, is parseFiltersAndSort async, false by default

• onChangeLoadParams - function, callback of changeLoadParams event of @vtaits/filterlist

• canInit - boolean, filterlist will not be initialized until canInit is true

useFilter

The hook that binds filterlist methods to the filter and receives its value by name

1import { useFilterlist, useFilter } from '@vtaits/react-filterlist';
2
3// ...
4
5const [requestParams, listState, filterlist] = useFilterlist(options);
6
7const {
8  setFilterValue,
9  setAndApplyFilter,
10  applyFilter,
11  resetFilter,
12  value,
13  appliedValue,
14} = useFilter(listState, filterlist, 'filter_name');
15
16setFilterValue('next_value');
17setAndApplyFilter('next_value');
18applyFilter();
19resetFilter();

useBoundFilter

useFilter that automatically bound to the filterlist

1import { useFilterlist } from '@vtaits/react-filterlist';
2
3// ...
4
5const [listState, filterlist, {
6  useBoundFilter,
7}] = useFilterlist(options);
8
9const {
10  setFilterValue,
11  setAndApplyFilter,
12  applyFilter,
13  resetFilter,
14  value,
15  appliedValue,
16} = useBoundFilter('filter_name');
17
18setFilterValue('next_value');
19setAndApplyFilter('next_value');
20applyFilter();
21resetFilter();

Navigator url sync

You can use one of the next integrations:

react-router v6

react-router v5

Or use createDataStore parameter as described in the core package