22
33Simple React state management. Made with :heart : and ES6 Proxies.
44
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 -->
66
77<a href =" #platform-support " ><img src =" images/browser_support.png " alt =" Browser support " width =" 450px " /></a >
88
@@ -42,7 +42,7 @@ React Easy State is a practical state management library with two functions and
4242
4343``` jsx
4444import React from ' react' ;
45- import { store , view } from ' react-easy-state' ;
45+ import { store , view } from ' @risingstack/ react-easy-state' ;
4646
4747const counter = store ({ num: 0 });
4848const increment = () => counter .num ++ ;
@@ -58,7 +58,7 @@ Check this [TodoMVC codesandbox](https://codesandbox.io/s/github/RisingStack/rea
5858
5959## Installation
6060
61- ` npm install react-easy-state `
61+ ` npm install @risingstack/ react-easy-state `
6262
6363<details >
6464<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
6969``` sh
7070npx create-react-app my-app
7171cd my-app
72- npm install react-easy-state
72+ npm install @risingstack/ react-easy-state
7373npm start
7474```
7575
@@ -84,7 +84,7 @@ _You need npm 5.2+ to use npx._
8484` 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.)
8585
8686``` js
87- import { store } from ' react-easy-state' ;
87+ import { store } from ' @risingstack/ react-easy-state' ;
8888
8989const user = store ({ name: ' Rick' });
9090// stores behave like normal JS objects
@@ -96,7 +96,7 @@ user.name = 'Bob';
9696<p ></p >
9797
9898``` js
99- import { store } from ' react-easy-state' ;
99+ import { store } from ' @risingstack/ react-easy-state' ;
100100
101101// stores can include any valid JS structure
102102// including nested data, arrays, Maps, Sets, getters, setters, inheritance, ...
@@ -127,7 +127,7 @@ user.friends.set('id', otherUser);
127127<p ></p >
128128
129129``` js
130- import { store } from ' react-easy-state' ;
130+ import { store } from ' @risingstack/ react-easy-state' ;
131131
132132const userStore = store ({
133133 user: {},
@@ -149,7 +149,7 @@ export default userStore;
149149_ userStore.js_
150150
151151``` js
152- import { store } from ' react-easy-state' ;
152+ import { store } from ' @risingstack/ react-easy-state' ;
153153
154154const userStore = store ({
155155 user: {},
@@ -164,7 +164,7 @@ export default userStore;
164164_ recipesStore.js_
165165
166166``` js
167- import { store } from ' react-easy-state' ;
167+ import { store } from ' @risingstack/ react-easy-state' ;
168168import userStore from ' ./userStore' ;
169169
170170const recipesStore = store ({
@@ -212,7 +212,7 @@ The first example wouldn't trigger re-renders on the `person.name = 'Ann'` mutat
212212<p ></p >
213213
214214``` jsx
215- import { store , view } from ' react-easy-state' ;
215+ import { store , view } from ' @risingstack/ react-easy-state' ;
216216
217217const counter = store ({
218218 num: 0 ,
@@ -239,7 +239,7 @@ Wrapping your components with `view` turns them into reactive views. A reactive
239239
240240``` jsx
241241import React from ' react' ;
242- import { view , store } from ' react-easy-state' ;
242+ import { view , store } from ' @risingstack/ react-easy-state' ;
243243
244244// this is a global state store
245245const user = store ({ name: ' Bob' });
@@ -261,7 +261,7 @@ export default view(() => (
261261<p ></p >
262262
263263``` jsx
264- import { view , store } from ' react-easy-state' ;
264+ import { view , store } from ' @risingstack/ react-easy-state' ;
265265
266266const appStore = store ({
267267 user: { name: ' Ann' },
@@ -291,7 +291,7 @@ const Profile = ({ user }) => <p>Name: {user.name}</p>;
291291
292292``` jsx
293293import React from ' react' ;
294- import { view , store } from ' react-easy-state' ;
294+ import { view , store } from ' @risingstack/ react-easy-state' ;
295295
296296const user = store ({ name: ' Bob' });
297297const timeline = store ({ posts: [' react-easy-state' ] });
@@ -325,7 +325,7 @@ export default view(() => (
325325
326326``` jsx
327327import React from ' react' ;
328- import { view , store , batch } from ' react-easy-state' ;
328+ import { view , store , batch } from ' @risingstack/ react-easy-state' ;
329329
330330const user = store ({ name: ' Bob' , age: 30 });
331331
@@ -347,7 +347,7 @@ If you mutate your stores multiple times synchronously from **exotic task source
347347
348348``` jsx
349349import React from ' react' ;
350- import { view , store , batch } from ' react-easy-state' ;
350+ import { view , store , batch } from ' @risingstack/ react-easy-state' ;
351351
352352const user = store ({ name: ' Bob' , age: 30 });
353353
@@ -377,7 +377,7 @@ export default view(() => (
377377<p ></p >
378378
379379``` jsx
380- import { view } from ' react-easy-state' ;
380+ import { view } from ' @risingstack/ react-easy-state' ;
381381import { withRouter } from ' react-router-dom' ;
382382import { withTheme } from ' styled-components' ;
383383
@@ -416,7 +416,7 @@ If you want React Developer Tools to recognize your reactive view components' na
416416
417417``` jsx
418418import React from ' react' ;
419- import { view , store } from ' react-easy-state' ;
419+ import { view , store } from ' @risingstack/ react-easy-state' ;
420420
421421const user = store ({
422422 name: ' Rick' ,
@@ -440,7 +440,7 @@ Third party helpers - like data grids - may consist of many internal components
440440
441441``` jsx
442442import React from ' react' ;
443- import { view , store } from ' react-easy-state' ;
443+ import { view , store } from ' @risingstack/ react-easy-state' ;
444444import Table from ' rc-table' ;
445445import cloneDeep from ' lodash/cloneDeep' ;
446446
@@ -468,7 +468,7 @@ A singleton global store is perfect for something like the current user, but som
468468
469469``` jsx
470470import React from ' react'
471- import { view , store } from ' react-easy-state'
471+ import { view , store } from ' @risingstack/ react-easy-state'
472472
473473export default view (() => {
474474 const counter = store ({ num: 0 })
@@ -485,7 +485,7 @@ export default view(() => {
485485
486486``` jsx
487487import React from ' react' ;
488- import { view , store } from ' react-easy-state' ;
488+ import { view , store } from ' @risingstack/ react-easy-state' ;
489489
490490export default view (() => {
491491 const [name , setName ] = useState (' Ann' );
@@ -510,7 +510,7 @@ export default view(() => {
510510<p ></p >
511511
512512``` jsx
513- import { store , view } from ' react-easy-state' ;
513+ import { store , view } from ' @risingstack/ react-easy-state' ;
514514
515515const localStore = () => ({ name: ' Bob' });
516516
@@ -528,7 +528,7 @@ This is useful for large local stores to avoid large object creation on every re
528528
529529``` jsx
530530import React , { Component } from ' react' ;
531- import { view , store } from ' react-easy-state' ;
531+ import { view , store } from ' @risingstack/ react-easy-state' ;
532532
533533class Counter extends Component {
534534 counter = store ({ num: 0 });
@@ -550,7 +550,7 @@ export default view(Counter);
550550
551551``` jsx
552552import React , { Component } from ' react' ;
553- import { view , store } from ' react-easy-state' ;
553+ import { view , store } from ' @risingstack/ react-easy-state' ;
554554
555555class Profile extends Component {
556556 state = { name: ' Ann' };
@@ -581,7 +581,7 @@ export default view(Profile);
581581
582582``` jsx
583583import React , { Component } from ' react' ;
584- import { view , store } from ' react-easy-state' ;
584+ import { view , store } from ' @risingstack/ react-easy-state' ;
585585
586586class Profile extends Component {
587587 // DON'T DO THIS
@@ -603,7 +603,7 @@ Class components wrapped with `view` have an extra static `deriveStoresFromProps
603603
604604``` jsx
605605import React , { Component } from ' react' ;
606- import { view , store } from ' react-easy-state' ;
606+ import { view , store } from ' @risingstack/ react-easy-state' ;
607607
608608class NameCard extends Component {
609609 userStore = store ({ name: ' Bob' });
@@ -633,7 +633,7 @@ Use `autoEffect` to react with automatic side effect to your store changes. Auto
633633<p ></p >
634634
635635``` jsx
636- import { store , autoEffect } from ' react-easy-state' ;
636+ import { store , autoEffect } from ' @risingstack/ react-easy-state' ;
637637
638638// DON'T DO THIS
639639const store1 = store ({ name: ' Store 1' })
@@ -653,7 +653,7 @@ const store2 = store({ get name () { return store1.name } })
653653Global auto effects can be created with ` autoEffect ` and cleared up with ` clearEffect ` .
654654
655655``` jsx
656- import { store , autoEffect , clearEffect } from ' react-easy-state' ;
656+ import { store , autoEffect , clearEffect } from ' @risingstack/ react-easy-state' ;
657657
658658const app = store ({ name: ' My App' })
659659const effect = autoEffect (() => document .title = app .name )
@@ -672,7 +672,7 @@ Use local auto effects in function components instead of the `useEffect` hook wh
672672
673673``` jsx
674674import React from ' react'
675- import { store , view , autoEffect } from ' react-easy-state' ;
675+ import { store , view , autoEffect } from ' @risingstack/ react-easy-state' ;
676676
677677export default view (() => {
678678 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
689689
690690``` jsx
691691import React from ' react'
692- import { store , view , autoEffect } from ' react-easy-state' ;
692+ import { store , view , autoEffect } from ' @risingstack/ react-easy-state' ;
693693
694694export default view (({ greeting }) => {
695695 const app = store ({ name: ' My App' })
@@ -707,7 +707,7 @@ Local effects in class components must be cleared when the component unmounts.
707707
708708``` jsx
709709import React , { Component } from ' react'
710- import { store , view , autoEffect } from ' react-easy-state' ;
710+ import { store , view , autoEffect } from ' @risingstack/ react-easy-state' ;
711711
712712class App extends Component {
713713 app = store ({ name: ' My App' })
@@ -768,12 +768,12 @@ _This library is based on non polyfillable ES6 Proxies. Because of this, it will
768768
769769This 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.
770770
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.
775775
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 ) .
777777
778778## Contributing
779779
0 commit comments