@promoboxx/use-filter 1.8.1 → 1.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,6 +7,8 @@ A React hook to easily build filter views, with features like:
|
|
|
7
7
|
- cursor based pagination
|
|
8
8
|
- offset / page based pagination
|
|
9
9
|
|
|
10
|
+
[Demo](https://stackblitz.com/edit/github-8ssor8)
|
|
11
|
+
|
|
10
12
|
## What's Included
|
|
11
13
|
|
|
12
14
|
The filter system providers you with a few things:
|
|
@@ -42,7 +44,7 @@ const { filterInfo, updateFilter, setPage, resetFilter, isLoading } = useFilter(
|
|
|
42
44
|
async onChange(
|
|
43
45
|
filterInfo,
|
|
44
46
|
// If this is called as a result of the filter changing, the reason will
|
|
45
|
-
// be 'filter', If it
|
|
47
|
+
// be 'filter', If it's due to the page changing, it will be 'pagination'.
|
|
46
48
|
updateReason,
|
|
47
49
|
) {
|
|
48
50
|
const { data } = await runQuery({
|
|
@@ -373,3 +375,39 @@ interface SimpleFilterInfo<TFilter> {
|
|
|
373
375
|
shouldRunImmediately: boolean
|
|
374
376
|
}
|
|
375
377
|
```
|
|
378
|
+
|
|
379
|
+
## Stores
|
|
380
|
+
|
|
381
|
+
Persistence is provided by "stores". use-filter comes with a few included:
|
|
382
|
+
|
|
383
|
+
- `memoryStore`: For when you want persistence across page views in your app, but not refreshes.
|
|
384
|
+
- `localStorageStore`: For when you want full persistence of filters.
|
|
385
|
+
- `reduxStore`: For when you want full persistence of filters and any extra goodies your redux middleware might bring you.
|
|
386
|
+
|
|
387
|
+
To use a store, simply:
|
|
388
|
+
|
|
389
|
+
```tsx
|
|
390
|
+
import { setFilterStore } from '@promoboxx/use-filter/dist/store'
|
|
391
|
+
import localStorageStore from '@promoboxx/use-filter/dist/store/localStorageStore'
|
|
392
|
+
|
|
393
|
+
setFilterStore(localStorageStore)
|
|
394
|
+
```
|
|
395
|
+
|
|
396
|
+
### Creating a store
|
|
397
|
+
|
|
398
|
+
If you would like to build your own, a store must match this interface:
|
|
399
|
+
|
|
400
|
+
```tsx
|
|
401
|
+
interface FilterStore {
|
|
402
|
+
getFilter<TFilter = any>(
|
|
403
|
+
namespace: string,
|
|
404
|
+
): FilterInfo<TFilter> | null | undefined
|
|
405
|
+
saveFilter<TFilter = any>(
|
|
406
|
+
namespace: string,
|
|
407
|
+
filter: FilterInfo<TFilter>,
|
|
408
|
+
): void
|
|
409
|
+
getData<TResult = any>(namespace: string): TResult | null | undefined
|
|
410
|
+
saveData<TResult = any>(namespace: string, data: TResult): void
|
|
411
|
+
clear(): void
|
|
412
|
+
}
|
|
413
|
+
```
|