@attack-monkey/reactstate
Advanced tools
+1
-1
| { | ||
| "name": "@attack-monkey/reactstate", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "Simple State Management for React", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
+23
-13
@@ -23,4 +23,4 @@ # reactstate | ||
| <MyApp> | ||
| <AddState id="counter1" init={1}/> | ||
| <AddState id="counter2" init={1}/> | ||
| <AddState id="counter1" init={1}/> | ||
| <AddState id="counter2" init={1}/> | ||
| </MyApp> | ||
@@ -40,7 +40,10 @@ | ||
| export const MyComponent = () => | ||
| fromState('myComponent', ['counter1', 'counter2'], ({ counter1, counter2 }) => | ||
| <> | ||
| fromState( | ||
| 'myComponent', | ||
| ['counter1', 'counter2'], | ||
| ({ counter1, counter2 }) => | ||
| <div> | ||
| <h1>{counter1}</h1> | ||
| <h1>{counter2}</h1> | ||
| </> | ||
| </div> | ||
| ) | ||
@@ -72,3 +75,3 @@ | ||
| import { connect, mutateState } from 'reactstate.config' | ||
| import { fromState, mutateState } from 'reactstate.config' | ||
@@ -78,9 +81,16 @@ const increment = (stateKey, currentState) => mutateState(stateKey, currentState + 1) | ||
| const MyComponent = () => | ||
| fromState('myComponent', ['counter1', 'counter2'], ({ counter1, counter2 }) => | ||
| <> | ||
| <h1>{counter1}</h1> | ||
| <h1>{counter2}</h1> | ||
| <button onClick={ () => increment('counter1', counter1) }>Increment counter 1</button> | ||
| <button onClick={ () => increment('counter2', counter2) }>Increment counter 2</button> | ||
| </> | ||
| fromState( | ||
| 'myComponent', | ||
| ['counter1', 'counter2'], | ||
| ({ counter1, counter2 }) => | ||
| <div> | ||
| <h1>{counter1}</h1> | ||
| <h1>{counter2}</h1> | ||
| <button onClick={ | ||
| () => increment('counter1', counter1) | ||
| }>Increment counter 1</button> | ||
| <button onClick={ | ||
| () => increment('counter2', counter2) | ||
| }>Increment counter 2</button> | ||
| </div> | ||
| ) | ||
@@ -87,0 +97,0 @@ |
11809
0.79%128
8.47%