@cervello/react 0.9.2 โ 0.9.3
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 +19 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
# Cervello
|
|
2
|
+
<img src="https://img.shields.io/npm/v/@cervello/react?color=red&style=flat-square">
|
|
3
|
+
|
|
2
4
|
> (Beta version) - Working on it to be have SSR integration (hydration) and better documentation
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
<img src="https://img.shields.io/bundlephobia/minzip/@cervello/react?color=red&label=BundlePhobia%20size&style=flat-square">
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
#### `746 Bytes of bundle size for now (.br compressed)!! `
|
|
5
10
|
Simplest and truly reactive state manager for React
|
|
6
11
|
|
|
7
12
|
|
|
@@ -30,7 +35,7 @@ The `cervello` function allows you to create a new store in an easy way.
|
|
|
30
35
|
|
|
31
36
|
```ts
|
|
32
37
|
// - store-example.ts
|
|
33
|
-
import { cervello } from 'cervello'
|
|
38
|
+
import { cervello } from '@cervello/react'
|
|
34
39
|
|
|
35
40
|
|
|
36
41
|
/** Export it with the names you prefer to be used/imported */
|
|
@@ -41,12 +46,12 @@ import { cervello } from 'cervello'
|
|
|
41
46
|
* Object returned => { storeNameProvided, useStore, useSelect }
|
|
42
47
|
*/
|
|
43
48
|
export const {
|
|
44
|
-
exampleStore,
|
|
49
|
+
exampleStore, // The store object
|
|
45
50
|
useStore: useExampleStore, // The hook to use the store
|
|
46
51
|
useSelect: useExampleSelect // The hook to use the selectors (part of the store)
|
|
47
52
|
} = cervello(
|
|
48
53
|
'exampleStore', /* store name */
|
|
49
|
-
{ count: 0 }
|
|
54
|
+
{ count: 0 } /* initial value */
|
|
50
55
|
)
|
|
51
56
|
```
|
|
52
57
|
|
|
@@ -76,14 +81,17 @@ const CounterButton = () => (
|
|
|
76
81
|
```
|
|
77
82
|
|
|
78
83
|
|
|
79
|
-
|
|
84
|
+
### ๐ Changing the store
|
|
80
85
|
```ts
|
|
81
86
|
const CounterLabel = () => {
|
|
82
87
|
/**
|
|
83
|
-
* If you want to just listen for changes, then you
|
|
88
|
+
* If you want to just listen for changes, then you
|
|
89
|
+
* can destructure the value but...
|
|
84
90
|
*
|
|
85
|
-
* IMPORTANT!:
|
|
86
|
-
*
|
|
91
|
+
* IMPORTANT!:
|
|
92
|
+
* In order to change reactively any store attribute, you
|
|
93
|
+
* must use the object returned from the `useStore` hook
|
|
94
|
+
* without destructuring
|
|
87
95
|
* */
|
|
88
96
|
const exampleStore = useExampleStore()
|
|
89
97
|
|
|
@@ -103,8 +111,8 @@ const CounterLabel = () => {
|
|
|
103
111
|
|
|
104
112
|
```
|
|
105
113
|
|
|
106
|
-
|
|
107
|
-
The use function allows you to implement side effects due to a change in
|
|
114
|
+
### โคต๏ธ The `Use` function
|
|
115
|
+
The use function allows you to implement side effects due to a change in happened in the store
|
|
108
116
|
```ts
|
|
109
117
|
import type { UseFunction } from '@cervello/react'
|
|
110
118
|
|
|
@@ -121,7 +129,7 @@ const { testStore } =
|
|
|
121
129
|
|
|
122
130
|
```
|
|
123
131
|
|
|
124
|
-
#### Use function callback object
|
|
132
|
+
#### ๐ณ๏ธ Use function callback object
|
|
125
133
|
```ts
|
|
126
134
|
import type { UseFunction } from '@cervello/react'
|
|
127
135
|
|