Use Filters

Hook to read/set filter values from/in the url.

Installation

$ npm i @drawbotics/use-filters

Usage

TypeScript

import { useFilters } from '@drawbotics/use-filters';

interface Filters {
  filterKey: string;
  filterKey2: 'one-value' | 'another-value';
}

// ... inside a component ...
const { filterKey, filterKey2 } = useFilter<Filters>(
  location,
  history,
  ['filterKey', 'filterKey2'],
  (key, value) => `Updated ${key} with ${value}`,
);

// read a filter value
console.log(filterKey.value); // => filterValue

// or an array value
console.log(filterKey.values); // => [filterValue]

// set a value
filterKey.set('newValue');

JavaScript

import { useFilters } from '@drawbotics/use-filters';

// ... inside a component ...
const { filterKey, filterKey2 } = useFilter(
  location,
  history,
  ['filterKey', 'filterKey2'],
  (key, value) => `Updated ${key} with ${value}`,
);

// read a filter value
console.log(filterKey.value); // => filterValue

// or an array value
console.log(filterKey.values); // => [filterValue]

// set a value
filterKey.set('newValue');