├── README.md
├── example
├── .babelrc
├── demo.js
├── index.html
├── index.js
├── main.css
├── package.json
├── src
│ ├── Input.js
│ └── Todos.js
└── styles
│ ├── lib
│ ├── align.scss
│ ├── buttons.scss
│ ├── display.scss
│ ├── flexbox.scss
│ ├── floats.scss
│ ├── forms.scss
│ ├── lists.scss
│ ├── positioning.scss
│ ├── spacing.scss
│ ├── tables.scss
│ ├── typography.scss
│ └── z-index.scss
│ └── main.scss
├── package
├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── index.js
└── package.json
└── static
└── basic.gif
/README.md:
--------------------------------------------------------------------------------
1 | # microstate
2 | Co-located, functional state management for React. `seState` syntatic sugar. **1.3kb**
3 |
4 | [](http://standardjs.com)
5 |
6 | ## Usage
7 | Wrap your application with the `Provider`.
8 | ```javascript
9 | import { Provider } from 'microstate'
10 |
11 | const App = props => (
12 |
13 | My App
14 |
15 | )
16 |
17 | render(
44 | Increment
45 | {count}
46 |
47 | )
48 |
49 | export default connect(
50 | mapStateToProps,
51 | mapDispatchToProps,
52 | initialState
53 | )(Component)
54 | ```
55 |
56 | Then render your component within the Provider context.
57 | ```javascript
58 | import { Provider } from 'microstate'
59 | import Component from './Component.js'
60 |
61 | const App = props => (
62 |
63 |
65 | )
66 |
67 | render({text + ' ' + count}
87 | ))
88 | ```
89 |
90 | Then add it to the rendered `App` from above.
91 | ```javascript
92 | import { Provider } from 'microstate'
93 | import Component from './Component.js'
94 | import Output from './Output.js'
95 |
96 | export default props => (
97 |
98 |
101 | )
102 |
103 | render(microstate
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { Provider } from 'microstate'
4 |
5 | import Input from './src/Input.js'
6 | import Todos from './src/Todos.js'
7 |
8 | const App = props => (
9 |
10 |
11 |
12 |
15 |
16 |
17 | )
18 |
19 | render(
13 |
14 | {props.todos.map(todo => (
15 | {todo}
16 | ))}
17 |
18 |
13 | My App
14 |
15 | )
16 |
17 | render(
44 | Increment
45 | {count}
46 |
47 | )
48 |
49 | export default connect(
50 | mapStateToProps,
51 | mapDispatchToProps,
52 | initialState
53 | )(Component)
54 | ```
55 |
56 | Then render your component within the Provider context.
57 | ```javascript
58 | import { Provider } from 'microstate'
59 | import Component from './Component.js'
60 |
61 | const App = props => (
62 |
63 |
65 | )
66 |
67 | render({text + ' ' + count}
87 | ))
88 | ```
89 |
90 | Then add it to the rendered `App` from above.
91 | ```javascript
92 | import { Provider } from 'microstate'
93 | import Component from './Component.js'
94 | import Output from './Output.js'
95 |
96 | export default props => (
97 |
98 |
101 | )
102 |
103 | render(
113 |
115 | )
116 |
--------------------------------------------------------------------------------
/package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "microstate",
3 | "version": "0.4.2",
4 | "description": "Co-located and composable state management for React and React-like libraries.",
5 | "main": "dist/index.js",
6 | "scripts": {
7 | "lint": "standard 'src/*.js'",
8 | "prebuild": "npm run lint",
9 | "build": "babel index.js -d dist/",
10 | "watch": "babel -w index.js -d dist/",
11 | "copy": "rm README.md ; cp ../README.md ./"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+ssh://git@github.com/estrattonbailey/microstate.git"
16 | },
17 | "author": "estrattonbailey",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/estrattonbailey/microstate/issues"
21 | },
22 | "homepage": "https://github.com/estrattonbailey/microstate#readme",
23 | "devDependencies": {
24 | "babel-cli": "^6.24.0",
25 | "babel-core": "^6.22.1",
26 | "babel-plugin-transform-class-properties": "^6.24.1",
27 | "babel-plugin-transform-object-rest-spread": "^6.23.0",
28 | "babel-preset-babili": "0.0.10",
29 | "babel-preset-es2015": "^6.22.0",
30 | "babel-preset-react": "^6.22.0",
31 | "parallelshell": "^2.0.0",
32 | "standard": "^8.6.0"
33 | },
34 | "dependencies": {
35 | "prop-types": "*"
36 | },
37 | "peerDependencies": {
38 | "react": "^15.5.4",
39 | "react-dom": "^15.5.4"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/static/basic.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estrattonbailey/microstate/7798800f386a293b3cfa24ddcc288428e23d40bc/static/basic.gif
--------------------------------------------------------------------------------