@apogeelabs/beacon-react-utils 0.2.0 → 0.3.1
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 +37 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,5 +1,40 @@
|
|
|
1
1
|
# Beacon/React Utilities
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This package provides some basic utilities to help bridge beacon stores with react hooks.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Right now it contains one helper hook: `useStoreWatcher`.
|
|
6
|
+
|
|
7
|
+
## useStoreWatcher
|
|
8
|
+
|
|
9
|
+
Normally, you would use the `observer` higher order function from mobx-react-lite to make components opt into mobx state changes. However, you can't use `observer` on a hook. If you have a situation where a stand-alone hook needs to react to changes in a beacon store, you can use `useStoreWatcher`.
|
|
10
|
+
|
|
11
|
+
A basic example:
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
useStoreWatcher<
|
|
15
|
+
CharitySelectionStoreState,
|
|
16
|
+
CharitySelectionStoreDerivedState,
|
|
17
|
+
CharitySelectionStoreActions,
|
|
18
|
+
Partial<CharitySearchArgs>
|
|
19
|
+
>(
|
|
20
|
+
// first arg is the store you want to watch
|
|
21
|
+
charitySelectionStore,
|
|
22
|
+
// second arg is the selector that returns the state you want to watch for changes
|
|
23
|
+
state => {
|
|
24
|
+
return state.charitySearchParams;
|
|
25
|
+
},
|
|
26
|
+
// third arg is the "onChange" handler that should execute when the selector state changes
|
|
27
|
+
params => {
|
|
28
|
+
// Only update if the params actually changed
|
|
29
|
+
if (!isEqual(params, prevParamsRef.current)) {
|
|
30
|
+
prevParamsRef.current = params;
|
|
31
|
+
debouncedSetSearchParams(params);
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
// fourth arg is a `fireImmediately` boolean, indicating if the onChange call should execute
|
|
35
|
+
// immediately when the hook is called, or if it should wait until changes are observed later
|
|
36
|
+
true
|
|
37
|
+
);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
There are definitely other ways to go about this than to use this hook. For example, the component, if wrapped with `observer` can pass store state into a hook, and the hook can watch it via useEffect internally. (In fact, that's the 80% use case for these needs - this hook is just useful if you need to avoid prop drilling, or if it makes the particular intent more clear.)
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"name": "Jim Cowart"
|
|
7
7
|
}
|
|
8
8
|
],
|
|
9
|
-
"version": "0.
|
|
9
|
+
"version": "0.3.1",
|
|
10
10
|
"license": "ISC",
|
|
11
11
|
"description": "beacon middleware for react-query integration with beacon stores",
|
|
12
12
|
"engines": {
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"lodash": "4.17.16",
|
|
41
41
|
"mobx": "^6.13.7",
|
|
42
|
-
"react": "
|
|
42
|
+
"react": "19.1.4",
|
|
43
43
|
"@apogeelabs/beacon": "0.4.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@types/jest": "^29.5.5",
|
|
47
47
|
"@types/lodash": "4.17.16",
|
|
48
|
-
"@types/react": "
|
|
48
|
+
"@types/react": "19.1.9",
|
|
49
49
|
"eslint": "^8.0.1",
|
|
50
50
|
"eslint-config-standard": "^17.1.0",
|
|
51
51
|
"eslint-plugin-import": "^2.25.2",
|