2
2
3
3
Simple React state management. Made with :heart : and ES6 Proxies.
4
4
5
- [](https://circleci.com/gh/RisingStack/react-easy-state/tree/master) [](https://david-dm.org/RisingStack/react-easy-state) [](https://coveralls.io/github/RisingStack/react-easy-state?branch=master) [](https://bundlephobia.com/result?p=react-easy-state) [](https://www.npmjs.com/package/react-easy-state) [](https://www.npmjs.com/package/react-easy-state) <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->[](#contributors-)<!-- ALL-CONTRIBUTORS-BADGE:END -->
5
+ [](https://circleci.com/gh/RisingStack/react-easy-state/tree/master) [](https://david-dm.org/RisingStack/react-easy-state) [](https://coveralls.io/github/RisingStack/react-easy-state?branch=master) [](https://bundlephobia.com/result?p=@risingstack/react-easy-state) [](https://www.npmjs.com/package/@risingstack/react-easy-state) [](https://www.npmjs.com/package/@risingstack/react-easy-state) <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->[](#contributors-)<!-- ALL-CONTRIBUTORS-BADGE:END -->
6
6
7
7
<a href =" #platform-support " ><img src =" images/browser_support.png " alt =" Browser support " width =" 450px " /></a >
8
8
@@ -42,7 +42,7 @@ React Easy State is a practical state management library with two functions and
42
42
43
43
``` jsx
44
44
import React from ' react' ;
45
- import { store , view } from ' react-easy-state' ;
45
+ import { store , view } from ' @risingstack/ react-easy-state' ;
46
46
47
47
const counter = store ({ num: 0 });
48
48
const increment = () => counter .num ++ ;
@@ -58,7 +58,7 @@ Check this [TodoMVC codesandbox](https://codesandbox.io/s/github/RisingStack/rea
58
58
59
59
## Installation
60
60
61
- ` npm install react-easy-state `
61
+ ` npm install @risingstack/ react-easy-state `
62
62
63
63
<details >
64
64
<summary ><strong >Setting up a quick project</strong ></summary >
@@ -69,7 +69,7 @@ Easy State supports <a href="https://github.com/facebookincubator/create-react-a
69
69
``` sh
70
70
npx create-react-app my-app
71
71
cd my-app
72
- npm install react-easy-state
72
+ npm install @risingstack/ react-easy-state
73
73
npm start
74
74
```
75
75
@@ -84,7 +84,7 @@ _You need npm 5.2+ to use npx._
84
84
` store ` creates a state store from the passed object and returns it. A state store behaves just like the passed object. (To be precise, it is a transparent reactive proxy of the original object.)
85
85
86
86
``` js
87
- import { store } from ' react-easy-state' ;
87
+ import { store } from ' @risingstack/ react-easy-state' ;
88
88
89
89
const user = store ({ name: ' Rick' });
90
90
// stores behave like normal JS objects
@@ -96,7 +96,7 @@ user.name = 'Bob';
96
96
<p ></p >
97
97
98
98
``` js
99
- import { store } from ' react-easy-state' ;
99
+ import { store } from ' @risingstack/ react-easy-state' ;
100
100
101
101
// stores can include any valid JS structure
102
102
// including nested data, arrays, Maps, Sets, getters, setters, inheritance, ...
@@ -127,7 +127,7 @@ user.friends.set('id', otherUser);
127
127
<p ></p >
128
128
129
129
``` js
130
- import { store } from ' react-easy-state' ;
130
+ import { store } from ' @risingstack/ react-easy-state' ;
131
131
132
132
const userStore = store ({
133
133
user: {},
@@ -149,7 +149,7 @@ export default userStore;
149
149
_ userStore.js_
150
150
151
151
``` js
152
- import { store } from ' react-easy-state' ;
152
+ import { store } from ' @risingstack/ react-easy-state' ;
153
153
154
154
const userStore = store ({
155
155
user: {},
@@ -164,7 +164,7 @@ export default userStore;
164
164
_ recipesStore.js_
165
165
166
166
``` js
167
- import { store } from ' react-easy-state' ;
167
+ import { store } from ' @risingstack/ react-easy-state' ;
168
168
import userStore from ' ./userStore' ;
169
169
170
170
const recipesStore = store ({
@@ -212,7 +212,7 @@ The first example wouldn't trigger re-renders on the `person.name = 'Ann'` mutat
212
212
<p ></p >
213
213
214
214
``` jsx
215
- import { store , view } from ' react-easy-state' ;
215
+ import { store , view } from ' @risingstack/ react-easy-state' ;
216
216
217
217
const counter = store ({
218
218
num: 0 ,
@@ -239,7 +239,7 @@ Wrapping your components with `view` turns them into reactive views. A reactive
239
239
240
240
``` jsx
241
241
import React from ' react' ;
242
- import { view , store } from ' react-easy-state' ;
242
+ import { view , store } from ' @risingstack/ react-easy-state' ;
243
243
244
244
// this is a global state store
245
245
const user = store ({ name: ' Bob' });
@@ -261,7 +261,7 @@ export default view(() => (
261
261
<p ></p >
262
262
263
263
``` jsx
264
- import { view , store } from ' react-easy-state' ;
264
+ import { view , store } from ' @risingstack/ react-easy-state' ;
265
265
266
266
const appStore = store ({
267
267
user: { name: ' Ann' },
@@ -291,7 +291,7 @@ const Profile = ({ user }) => <p>Name: {user.name}</p>;
291
291
292
292
``` jsx
293
293
import React from ' react' ;
294
- import { view , store } from ' react-easy-state' ;
294
+ import { view , store } from ' @risingstack/ react-easy-state' ;
295
295
296
296
const user = store ({ name: ' Bob' });
297
297
const timeline = store ({ posts: [' react-easy-state' ] });
@@ -325,7 +325,7 @@ export default view(() => (
325
325
326
326
``` jsx
327
327
import React from ' react' ;
328
- import { view , store , batch } from ' react-easy-state' ;
328
+ import { view , store , batch } from ' @risingstack/ react-easy-state' ;
329
329
330
330
const user = store ({ name: ' Bob' , age: 30 });
331
331
@@ -347,7 +347,7 @@ If you mutate your stores multiple times synchronously from **exotic task source
347
347
348
348
``` jsx
349
349
import React from ' react' ;
350
- import { view , store , batch } from ' react-easy-state' ;
350
+ import { view , store , batch } from ' @risingstack/ react-easy-state' ;
351
351
352
352
const user = store ({ name: ' Bob' , age: 30 });
353
353
@@ -377,7 +377,7 @@ export default view(() => (
377
377
<p ></p >
378
378
379
379
``` jsx
380
- import { view } from ' react-easy-state' ;
380
+ import { view } from ' @risingstack/ react-easy-state' ;
381
381
import { withRouter } from ' react-router-dom' ;
382
382
import { withTheme } from ' styled-components' ;
383
383
@@ -416,7 +416,7 @@ If you want React Developer Tools to recognize your reactive view components' na
416
416
417
417
``` jsx
418
418
import React from ' react' ;
419
- import { view , store } from ' react-easy-state' ;
419
+ import { view , store } from ' @risingstack/ react-easy-state' ;
420
420
421
421
const user = store ({
422
422
name: ' Rick' ,
@@ -440,7 +440,7 @@ Third party helpers - like data grids - may consist of many internal components
440
440
441
441
``` jsx
442
442
import React from ' react' ;
443
- import { view , store } from ' react-easy-state' ;
443
+ import { view , store } from ' @risingstack/ react-easy-state' ;
444
444
import Table from ' rc-table' ;
445
445
import cloneDeep from ' lodash/cloneDeep' ;
446
446
@@ -468,7 +468,7 @@ A singleton global store is perfect for something like the current user, but som
468
468
469
469
``` jsx
470
470
import React from ' react'
471
- import { view , store } from ' react-easy-state'
471
+ import { view , store } from ' @risingstack/ react-easy-state'
472
472
473
473
export default view (() => {
474
474
const counter = store ({ num: 0 })
@@ -485,7 +485,7 @@ export default view(() => {
485
485
486
486
``` jsx
487
487
import React from ' react' ;
488
- import { view , store } from ' react-easy-state' ;
488
+ import { view , store } from ' @risingstack/ react-easy-state' ;
489
489
490
490
export default view (() => {
491
491
const [name , setName ] = useState (' Ann' );
@@ -510,7 +510,7 @@ export default view(() => {
510
510
<p ></p >
511
511
512
512
``` jsx
513
- import { store , view } from ' react-easy-state' ;
513
+ import { store , view } from ' @risingstack/ react-easy-state' ;
514
514
515
515
const localStore = () => ({ name: ' Bob' });
516
516
@@ -528,7 +528,7 @@ This is useful for large local stores to avoid large object creation on every re
528
528
529
529
``` jsx
530
530
import React , { Component } from ' react' ;
531
- import { view , store } from ' react-easy-state' ;
531
+ import { view , store } from ' @risingstack/ react-easy-state' ;
532
532
533
533
class Counter extends Component {
534
534
counter = store ({ num: 0 });
@@ -550,7 +550,7 @@ export default view(Counter);
550
550
551
551
``` jsx
552
552
import React , { Component } from ' react' ;
553
- import { view , store } from ' react-easy-state' ;
553
+ import { view , store } from ' @risingstack/ react-easy-state' ;
554
554
555
555
class Profile extends Component {
556
556
state = { name: ' Ann' };
@@ -581,7 +581,7 @@ export default view(Profile);
581
581
582
582
``` jsx
583
583
import React , { Component } from ' react' ;
584
- import { view , store } from ' react-easy-state' ;
584
+ import { view , store } from ' @risingstack/ react-easy-state' ;
585
585
586
586
class Profile extends Component {
587
587
// DON'T DO THIS
@@ -603,7 +603,7 @@ Class components wrapped with `view` have an extra static `deriveStoresFromProps
603
603
604
604
``` jsx
605
605
import React , { Component } from ' react' ;
606
- import { view , store } from ' react-easy-state' ;
606
+ import { view , store } from ' @risingstack/ react-easy-state' ;
607
607
608
608
class NameCard extends Component {
609
609
userStore = store ({ name: ' Bob' });
@@ -633,7 +633,7 @@ Use `autoEffect` to react with automatic side effect to your store changes. Auto
633
633
<p ></p >
634
634
635
635
``` jsx
636
- import { store , autoEffect } from ' react-easy-state' ;
636
+ import { store , autoEffect } from ' @risingstack/ react-easy-state' ;
637
637
638
638
// DON'T DO THIS
639
639
const store1 = store ({ name: ' Store 1' })
@@ -653,7 +653,7 @@ const store2 = store({ get name () { return store1.name } })
653
653
Global auto effects can be created with ` autoEffect ` and cleared up with ` clearEffect ` .
654
654
655
655
``` jsx
656
- import { store , autoEffect , clearEffect } from ' react-easy-state' ;
656
+ import { store , autoEffect , clearEffect } from ' @risingstack/ react-easy-state' ;
657
657
658
658
const app = store ({ name: ' My App' })
659
659
const effect = autoEffect (() => document .title = app .name )
@@ -672,7 +672,7 @@ Use local auto effects in function components instead of the `useEffect` hook wh
672
672
673
673
``` jsx
674
674
import React from ' react'
675
- import { store , view , autoEffect } from ' react-easy-state' ;
675
+ import { store , view , autoEffect } from ' @risingstack/ react-easy-state' ;
676
676
677
677
export default view (() => {
678
678
const app = store ({ name: ' My App' })
@@ -689,7 +689,7 @@ Because of the design of React hooks you have to explicitly pass all none reacti
689
689
690
690
``` jsx
691
691
import React from ' react'
692
- import { store , view , autoEffect } from ' react-easy-state' ;
692
+ import { store , view , autoEffect } from ' @risingstack/ react-easy-state' ;
693
693
694
694
export default view (({ greeting }) => {
695
695
const app = store ({ name: ' My App' })
@@ -707,7 +707,7 @@ Local effects in class components must be cleared when the component unmounts.
707
707
708
708
``` jsx
709
709
import React , { Component } from ' react'
710
- import { store , view , autoEffect } from ' react-easy-state' ;
710
+ import { store , view , autoEffect } from ' @risingstack/ react-easy-state' ;
711
711
712
712
class App extends Component {
713
713
app = store ({ name: ' My App' })
@@ -768,12 +768,12 @@ _This library is based on non polyfillable ES6 Proxies. Because of this, it will
768
768
769
769
This library detects if you use ES6 or commonJS modules and serve the right format to you. The default bundles use ES6 features, which may not yet be supported by some minifier tools. If you experience issues during the build process, you can switch to one of the ES5 builds from below.
770
770
771
- - ` react-easy-state/dist/es.es6.js ` exposes an ES6 build with ES6 modules.
772
- - ` react-easy-state/dist/es.es5.js ` exposes an ES5 build with ES6 modules.
773
- - ` react-easy-state/dist/cjs.es6.js ` exposes an ES6 build with commonJS modules.
774
- - ` react-easy-state/dist/cjs.es5.js ` exposes an ES5 build with commonJS modules.
771
+ - ` @risingstack/ react-easy-state/dist/es.es6.js` exposes an ES6 build with ES6 modules.
772
+ - ` @risingstack/ react-easy-state/dist/es.es5.js` exposes an ES5 build with ES6 modules.
773
+ - ` @risingstack/ react-easy-state/dist/cjs.es6.js` exposes an ES6 build with commonJS modules.
774
+ - ` @risingstack/ react-easy-state/dist/cjs.es5.js` exposes an ES5 build with commonJS modules.
775
775
776
- If you use a bundler, set up an alias for ` react-easy-state ` to point to your desired build. You can learn how to do it with webpack [ here] ( https://webpack.js.org/configuration/resolve/#resolve-alias ) and with rollup [ here] ( https://github.com/rollup/rollup-plugin-alias#usage ) .
776
+ If you use a bundler, set up an alias for ` @risingstack/ react-easy-state` to point to your desired build. You can learn how to do it with webpack [ here] ( https://webpack.js.org/configuration/resolve/#resolve-alias ) and with rollup [ here] ( https://github.com/rollup/rollup-plugin-alias#usage ) .
777
777
778
778
## Contributing
779
779
0 commit comments