@vtaits/react-filterlist-router-6
v1.0.2
Published
Integration of `@vtaits/react-filterlist` with `react-router-dom` v6
Downloads
10
Maintainers
Readme
@vtaits/react-filterlist-router-6
Integration of @vtaits/filterlist with react-router-dom
Installation
npm install @vtaits/filterlist @vtaits/react-filterlist @vtaits/react-filterlist-router-6 --save
or
yarn add @vtaits/filterlist @vtaits/react-filterlist @vtaits/react-filterlist-router-6
Simple examples
import { useFilterlist } from '@vtaits/react-filterlist';
import { useCreateDataStore } from '@vtaits/react-filterlist-router-6';
function List() {
const createDataStore = useCreateDataStore();
const [requestParams, listState, filterlist] = useFilterlist({
createDataStore,
loadItems: async () => {
const response = await fetch('/cars');
const cars = await response.json();
return {
items: cars,
total: cars.length,
};
},
});
const {
items,
loading,
total,
} = listState;
return (
<div>
<table>
<thead>
<tr>
<th>id</th>
<th>brand</th>
<th>owner</th>
<th>color</th>
</tr>
</thead>
<tbody>
{
items.map(({
id,
brand,
owner,
color,
}) => (
<tr key={ id }>
<td>{ id }</td>
<td>{ brand }</td>
<td>{ owner }</td>
<td>{ color }</td>
</tr>
))
}
</tbody>
</table>
{
typeof total === 'number' && (
<h4>
Total: {total}
</h4>
)
}
{
loading && (
<h3>Loading...</h3>
)
}
</div>
);
};