@vtaits/react-filterlist-router-5

Integration of @vtaits/filterlist with react-router-dom v5

Installation

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

or

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

or

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

Simple examples

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