context-scoped-state 0.0.4 → 0.0.6
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 +10 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,12 +30,16 @@ pnpm add context-scoped-state
|
|
|
30
30
|
|
|
31
31
|
> **Peer Dependencies:** React 18+
|
|
32
32
|
|
|
33
|
+
## Try it Online
|
|
34
|
+
|
|
35
|
+
[](https://stackblitz.com/github/HarshRohila/context-scoped-state/tree/master/examples/playground)
|
|
36
|
+
|
|
33
37
|
## Quick Start
|
|
34
38
|
|
|
35
39
|
### 1. Create Your Store (one file, one export)
|
|
36
40
|
|
|
37
41
|
```tsx
|
|
38
|
-
//
|
|
42
|
+
// counterStore.ts
|
|
39
43
|
import { Store, createStoreHook } from 'context-scoped-state';
|
|
40
44
|
|
|
41
45
|
class CounterStore extends Store<{ count: number }> {
|
|
@@ -59,16 +63,16 @@ export const useCounterStore = createStoreHook(CounterStore);
|
|
|
59
63
|
### 2. Use in Your App
|
|
60
64
|
|
|
61
65
|
```tsx
|
|
62
|
-
import { useCounterStore } from './
|
|
66
|
+
import { useCounterStore } from './counterStore';
|
|
63
67
|
|
|
64
68
|
function Counter() {
|
|
65
|
-
const
|
|
69
|
+
const counterStore = useCounterStore();
|
|
66
70
|
|
|
67
71
|
return (
|
|
68
72
|
<div>
|
|
69
|
-
<span>{
|
|
70
|
-
<button onClick={() =>
|
|
71
|
-
<button onClick={() =>
|
|
73
|
+
<span>{counterStore.state.count}</span>
|
|
74
|
+
<button onClick={() => counterStore.increment()}>+</button>
|
|
75
|
+
<button onClick={() => counterStore.decrement()}>-</button>
|
|
72
76
|
</div>
|
|
73
77
|
);
|
|
74
78
|
}
|
|
@@ -179,7 +183,6 @@ No mocking libraries. No global state cleanup. Just render with the state you ne
|
|
|
179
183
|
- Building reusable components with internal state
|
|
180
184
|
- You want test isolation without extra setup
|
|
181
185
|
- State naturally belongs to a subtree, not the whole app
|
|
182
|
-
- You prefer OOP patterns (classes, methods)
|
|
183
186
|
|
|
184
187
|
**Need global state?** Just place the Context at your app root — same API, app-wide access.
|
|
185
188
|
|