https://github.com/drawbotics/drawbotics-use-filters
Hook to manage filter values and keep them in sync with the url
https://github.com/drawbotics/drawbotics-use-filters
Last synced: 2 months ago
JSON representation
Hook to manage filter values and keep them in sync with the url
- Host: GitHub
- URL: https://github.com/drawbotics/drawbotics-use-filters
- Owner: Drawbotics
- Created: 2019-12-10T13:03:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-08T10:28:46.000Z (almost 3 years ago)
- Last Synced: 2024-12-22T03:07:54.867Z (5 months ago)
- Language: TypeScript
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Use Filters
Hook to read/set filter values from/in the url.
## Installation
```bash
$ npm i @drawbotics/use-filters
```
## Usage
### TypeScript
```tsx
import { useFilters } from '@drawbotics/use-filters';
interface Filters {
filterKey: string;
filterKey2: 'one-value' | 'another-value';
}
// ... 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');
```
### JavaScript
```jsx
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');
```