Skip to content

andrewmcoupe/react-router-dom-filters

Repository files navigation

✨Type-safe filters

Create type-safe hooks for filtering data with React Router.

📦 Installation

pnpm add react-router-dom-filters
npm install --save react-router-dom-filters
yarn add react-router-dom-filters

🚀 Usage

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>
  );
};