Create type-safe hooks for filtering data with React Router.
pnpm add react-router-dom-filters
npm install --save react-router-dom-filters
yarn add react-router-dom-filters
import { createFiltersHook } from 'react-router-dom-filters';
const filterKeys = ['instances', 'categories', 'sortBy'] as const;
export const useFilters = createFiltersHook(filterKeys);
const App = () => {
const { activeFilters, updateFilters, resetFilters } = useFilters();
const handleClick = () => {
updateFilters({
key: 'instances',
/* 👆Type-safe filter keys ✨ */
value: 'all',
});
}
return (
<div>
<button onClick={handleClick}>Update</button>
<button onClick={resetFilters}>Reset filters</button>
</div>
);
};