@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.
Files changed (2) hide show
  1. package/README.md +39 -1
  2. 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.s due to the page changing, it will be 'pagination'.
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
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@promoboxx/use-filter",
3
- "version": "1.8.1",
3
+ "version": "1.8.2",
4
4
  "description": "",
5
5
  "main": "dist/useFilter.js",
6
6
  "keywords": [],