~repos /atoms-state
git clone https://pyrossh.dev/repos/atoms-state.git
Simple State management for react
cd04708c
—
pyros2097 4 years ago
add example
- README.md +37 -0
- package.json +3 -0
README.md
CHANGED
|
@@ -1,4 +1,41 @@
|
|
|
1
1
|
# atoms
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/pyros2097/atoms)
|
|
4
|
+
|
|
3
5
|
A simple statemanagement library for react.
|
|
4
6
|
|
|
7
|
+
`npm i @pyros2097/atoms`
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
```js
|
|
11
|
+
import React from 'react';
|
|
12
|
+
import ReactDOM from 'react-dom';
|
|
13
|
+
import { atom, useAtom } from '@pyros2097/atoms';
|
|
14
|
+
|
|
15
|
+
const countAtom = atom(10);
|
|
16
|
+
const sumAtom = atom(get => get(countAtom) + 10);
|
|
17
|
+
|
|
18
|
+
const increment = () => {
|
|
19
|
+
countAtom.update(count => count + 1);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const decrement = () => {
|
|
23
|
+
countAtom.update(count => count - 1);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const Counter = () => {
|
|
27
|
+
const count = useAtom(countAtom);
|
|
28
|
+
const sum = useAtom(sumAtom);
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
<p>Count: {count}</p>
|
|
33
|
+
<p>Sum: {sum}</p>
|
|
34
|
+
<button onClick={increment}>Inc</button>
|
|
35
|
+
<button onClick={decrement}>Dec</button>
|
|
36
|
+
</div>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
ReactDOM.render(<Counter />, document.getElementById('root'));
|
|
41
|
+
```
|
package.json
CHANGED
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
"engines": {
|
|
11
11
|
"node": ">=10"
|
|
12
12
|
},
|
|
13
|
+
"publishConfig": {
|
|
14
|
+
"access": "public"
|
|
15
|
+
},
|
|
13
16
|
"scripts": {
|
|
14
17
|
"start": "tsdx watch",
|
|
15
18
|
"build": "tsdx build",
|