|
2 | 2 |
|
3 | 3 | [](https://travis-ci.org/microstates/react) [](https://greenkeeper.io/) |
4 | 4 |
|
5 | | -Component for rendering Microstates models in React. Go to [Microstates](https://github.com/cowboyd/microstates.js) repo to learn about Microstates models. |
| 5 | +This package provides `useType` hook for React that supports `useState` hook. |
| 6 | + |
| 7 | +*If your version of React doesn't have `useState`, don't install this package. Go to [Microstates with React Class Components](#microstates-with-react-class-components) section.* |
6 | 8 |
|
7 | 9 | ## Installation |
8 | 10 |
|
9 | 11 | ```bash |
10 | 12 | npm install --save @microstates/react |
11 | | -``` |
12 | 13 |
|
13 | | -or |
| 14 | +# or |
14 | 15 |
|
15 | | -```bash |
16 | 16 | yarn add @microstates/react |
17 | 17 | ``` |
18 | 18 |
|
19 | | -## How to use |
20 | | - |
21 | | -This library provides a component that takes a Microstates model type and creates an instance of the given type. The instance will be sent to one the following: `children` function, props `render` function or a context consumer. |
22 | | - |
23 | | -### <State type={Type} value={any} render={fn} from={any} /> |
24 | | - |
25 | | -State component takes type and value arguments. Type is a class definition that describes the structure of the data. The component will instantiate this class by passing it to `Microstates.create(Type, value)`. The `value` prop is used to provide initial value for the Microstates model. |
| 19 | +## Usage |
26 | 20 |
|
27 | | -### `children` function |
28 | | - |
29 | | -```js |
30 | | -import State from "@microstates/react"; |
| 21 | +`useType` takes the same arguements as Microstates `create` but it provides you with a microstate |
| 22 | +that will re-render the component on every transition. |
31 | 23 |
|
| 24 | +```jsx |
32 | 25 | function App() { |
33 | | - return ( |
34 | | - <State type={Number} value={42}> |
35 | | - {number => { |
36 | | - return ( |
37 | | - <div> |
38 | | - <span className="value">{number.state}</span> |
39 | | - <button onClick={() => number.increment()}>Increment</button> |
40 | | - </div> |
41 | | - ); |
42 | | - }} |
43 | | - </State> |
44 | | - ); |
45 | | -} |
46 | | -``` |
47 | | - |
48 | | -### props `render` function |
49 | | - |
50 | | -If you prefer props `render` function, you can use it same as the `children` function. |
51 | | - |
52 | | -```js |
53 | | -import State from "@microstates/react"; |
54 | | - |
55 | | -function App() { |
56 | | - return ( |
57 | | - <State |
58 | | - type={Number} |
59 | | - value={42} |
60 | | - render={number => { |
61 | | - return ( |
62 | | - <div> |
63 | | - <span className="value">{number.state}</span> |
64 | | - <button onClick={() => number.increment()}>Increment</button> |
65 | | - </div> |
66 | | - ); |
67 | | - }} |
68 | | - /> |
69 | | - ); |
70 | | -} |
71 | | -``` |
72 | | - |
73 | | -### `from` prop |
| 26 | + let number = useType(Number, 42); |
74 | 27 |
|
75 | | -`from` prop allows you to create a microstate by providing an initial value for the microstate without providing a Type. Microstates will figure out the transitions and state from the value itself. |
76 | | - |
77 | | -```js |
78 | | -import Microstates from "@microstates/react"; |
79 | | - |
80 | | -function App() { |
81 | 28 | return ( |
82 | | - <State |
83 | | - from={42} |
84 | | - render={number => { |
85 | | - return ( |
86 | | - <div> |
87 | | - <span className="value">{number.state}</span> |
88 | | - <button onClick={() => number.increment()}>Increment</button> |
89 | | - </div> |
90 | | - ); |
91 | | - }} |
92 | | - /> |
| 29 | + <> |
| 30 | + <span>{number.state}</span> |
| 31 | + <button onClick={() => number.increment()}>Increment</button> |
| 32 | + </> |
93 | 33 | ); |
94 | 34 | } |
95 | 35 | ``` |
96 | 36 |
|
97 | | -### Context API |
| 37 | +## Microstates with React Class Components |
98 | 38 |
|
99 | | -`Microstates` component has a Context Provider that is compatible with [React RFCs #2: New Version of Context API](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md). It is also backwards compatible with pre React 16.3. |
| 39 | +It's easier to setup Microstates with React Class Component than to install a package |
| 40 | +that provides a component that does this. Here is how it's done. |
100 | 41 |
|
101 | | -To use the context API, import `Consumer` component from `@microstates/react` package. |
| 42 | +```jsx |
| 43 | +import React from 'react'; |
| 44 | +import { create, Store } from 'microstates'; |
102 | 45 |
|
103 | | -```js |
104 | | -import State, { Consumer } from "@microstates/react"; |
| 46 | +let initial = create(Number, 42); |
105 | 47 |
|
106 | | -class ModalModel { |
107 | | - content = String; |
108 | | - isOpen = Boolean; |
109 | | -} |
| 48 | +class App extends React.Component { |
| 49 | + // this function will be invoked when transition is called |
| 50 | + // it will receive the next microstate. Set it onto your state. |
| 51 | + update = $ => this.setState({ $ }); |
110 | 52 |
|
111 | | -class AppModel { |
112 | | - modal = ModalModel; |
113 | | - counter = Number; |
114 | | -} |
| 53 | + state = { |
| 54 | + // I'm using $ cause I'm bling like that, |
| 55 | + // but you can use anything you want |
| 56 | + $: Store(initial, this.update) |
| 57 | + } |
115 | 58 |
|
116 | | -function Modal() { |
117 | | - return ( |
118 | | - <Consumer> |
119 | | - {model => { |
120 | | - if (model.state.modal.isOpen) { |
121 | | - return ( |
122 | | - <div className="modal-content"> |
123 | | - {model.state.modal.content} |
124 | | - </div> |
125 | | - ) |
126 | | - } |
127 | | - return null; |
128 | | - }} |
129 | | - </Consumer> |
130 | | - ) |
131 | | -} |
132 | | - |
133 | | -function App() { |
134 | | - return ( |
135 | | - <State |
136 | | - type={AppModel} |
137 | | - value={{ modal: { content: "Hello World!!!" }, counter: 42 }} |
138 | | - > |
139 | | - {model => { |
140 | | - return ( |
141 | | - <div> |
142 | | - <button onClick={() => model.modal.isOpen.toggle()}>Toggle Modal</button> |
143 | | - <Modal> |
144 | | - </div> |
145 | | - ); |
146 | | - }} |
147 | | - </State> |
148 | | - ); |
| 59 | + render() { |
| 60 | + return this.state.$.state; |
| 61 | + } |
149 | 62 | } |
150 | 63 | ``` |
151 | 64 |
|
152 | | -## onChange(nextValue: any) |
153 | | - |
154 | | -`onChange` prop can be used to receive the serialized value of the microstate after every state transition. |
155 | | - |
156 | | -```js |
157 | | -import State from "@microstates/react"; |
158 | | - |
159 | | -function App() { |
160 | | - return ( |
161 | | - <State type={Number} value={42} onChange={value => console.log(value)}> |
162 | | - {number => { |
163 | | - return ( |
164 | | - <div> |
165 | | - <span className="value">{number.state}</span> |
166 | | - <button onClick={() => number.increment()}>Increment</button> |
167 | | - </div> |
168 | | - ); |
169 | | - }} |
170 | | - </State> |
171 | | - ); |
172 | | -} |
173 | | -``` |
174 | | - |
175 | | -## Credits |
176 | | - |
177 | | -Big thanks to Jamie Kyle for [create-react-context](https://github.com/jamiebuilds/create-react-context) package that provides the React Context API Polyfill. |
| 65 | +That's it. |
0 commit comments