Skip to content
This repository was archived by the owner on Apr 17, 2020. It is now read-only.

Commit 00f11da

Browse files
bradwoodsbradwoods
committed
Add typeScript examples to README
1 parent 5922e00 commit 00f11da

File tree

1 file changed

+255
-23
lines changed

1 file changed

+255
-23
lines changed

‎README.md‎

Lines changed: 255 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,13 @@ npm i react-xstate-js -S
1111
```
1212

1313
# Using
14-
A playground with the following examples can be found [here](https://github.com/bradwoods/react-xstate-js-playground).
15-
1614
## Example 1 - reading & changing state
1715
```js
1816
import React from 'react';
1917
import { Machine } from 'react-xstate-js';
2018

21-
const machineConfig = {
19+
const myMachineConfig = {
2220
key: 'example1',
23-
strict: true,
2421
initial: 'step1',
2522
states: {
2623
step1: {
@@ -43,7 +40,7 @@ const machineConfig = {
4340
};
4441

4542
const MyComponent = () => (
46-
<Machine config={machineConfig}>
43+
<Machine config={myMachineConfig}>
4744
{({ service, state }) => (
4845
<>
4946
<button
@@ -69,14 +66,81 @@ const MyComponent = () => (
6966
);
7067
```
7168

69+
## Example 1 - TypeScript
70+
```tsx
71+
import React from 'react';
72+
import {
73+
MachineConfig, Machine, State, Interpreter
74+
} from 'react-xstate-js'
75+
76+
interface MyStateSchema {
77+
states: {
78+
step1: {}
79+
step2: {}
80+
step3: {}
81+
}
82+
}
83+
84+
type MyEvent = { type: 'NEXT' }
85+
| { type: 'PREVIOUS' }
86+
87+
const myMachineConfig: MachineConfig<{}, MyStateSchema, MyEvent> = {
88+
key: 'example1',
89+
initial: 'step1',
90+
states: {
91+
step1: {
92+
on: {
93+
NEXT: 'step2',
94+
},
95+
},
96+
step2: {
97+
on: {
98+
PREVIOUS: 'step1',
99+
NEXT: 'step3',
100+
},
101+
},
102+
step3: {
103+
on: {
104+
PREVIOUS: 'step2',
105+
},
106+
},
107+
},
108+
}
109+
110+
const MyComponent: React.SFC = () => (
111+
<Machine config={myMachineConfig}>
112+
{({ service, state }: { service: Interpreter<{}, MyStateSchema, MyEvent>, state: State<{}, MyEvent> }) => (
113+
<>
114+
<button
115+
type="button"
116+
onClick={() => service.send({ type: 'PREVIOUS' })}
117+
>
118+
previous
119+
</button>
120+
<button
121+
type="button"
122+
onClick={() => service.send({ type: 'NEXT' })}
123+
>
124+
next
125+
</button>
126+
<p>
127+
state:
128+
{' '}
129+
{JSON.stringify(state.value)}
130+
</p>
131+
</>
132+
)}
133+
</Machine>
134+
)
135+
```
136+
72137
## Example 2 - options (with actions)
73138
```js
74139
import React from 'react';
75140
import { Machine } from 'react-xstate-js';
76141

77-
const machineConfig = {
142+
const myMachineConfig = {
78143
key: 'example2',
79-
strict: true,
80144
initial: 'step1',
81145
states: {
82146
step1: {
@@ -99,7 +163,7 @@ const machineConfig = {
99163
},
100164
};
101165

102-
const machineOptions = {
166+
const myMachineOptions = {
103167
actions: {
104168
myAction: () => {
105169
console.log('myAction fired');
@@ -109,8 +173,8 @@ const machineOptions = {
109173

110174
const MyComponent = () => (
111175
<Machine
112-
config={machineConfig}
113-
options={machineOptions}
176+
config={myMachineConfig}
177+
options={myMachineOptions}
114178
>
115179
{({ service, state }) => (
116180
<>
@@ -137,17 +201,96 @@ const MyComponent = () => (
137201
);
138202
```
139203

204+
## Example 2 - TypeScript
205+
```tsx
206+
import React from 'react';
207+
import {
208+
MachineConfig, MachineOptions, Machine, State, Interpreter
209+
} from 'react-xstate-js'
210+
211+
interface MyStateSchema {
212+
states: {
213+
step1: {}
214+
step2: {}
215+
step3: {}
216+
}
217+
}
218+
219+
type MyEvent = { type: 'NEXT' }
220+
| { type: 'PREVIOUS' }
221+
222+
const myMachineConfig: MachineConfig<{}, MyStateSchema, MyEvent> = {
223+
key: 'example1',
224+
initial: 'step1',
225+
states: {
226+
step1: {
227+
on: {
228+
NEXT: 'step2',
229+
},
230+
},
231+
step2: {
232+
onEntry: ['myAction'],
233+
on: {
234+
PREVIOUS: 'step1',
235+
NEXT: 'step3',
236+
},
237+
},
238+
step3: {
239+
on: {
240+
PREVIOUS: 'step2',
241+
},
242+
},
243+
},
244+
}
245+
246+
const myMachineOptions: MachineOptions<{}, MyEvent> = {
247+
actions: {
248+
myAction: () => {
249+
console.log('myAction fired');
250+
},
251+
},
252+
};
253+
254+
const MyComponent: React.SFC = () => (
255+
<Machine
256+
config={myMachineConfig}
257+
options={myMachineOptions}
258+
>
259+
{({ service, state }: { service: Interpreter<{}, MyStateSchema, MyEvent>, state: State<{}, MyEvent> }) => (
260+
<>
261+
<button
262+
type="button"
263+
onClick={() => service.send({ type: 'PREVIOUS' })}
264+
>
265+
previous
266+
</button>
267+
<button
268+
type="button"
269+
onClick={() => service.send({ type: 'NEXT' })}
270+
>
271+
next
272+
</button>
273+
<p>
274+
state:
275+
{' '}
276+
{JSON.stringify(state.value)}
277+
</p>
278+
</>
279+
)}
280+
</Machine>
281+
)
282+
```
283+
140284
## Example 3 - context
141-
```js
285+
```jsx
142286
import React from 'react';
143287
import { Machine } from 'react-xstate-js';
144288
import { actions } from 'xstate';
145289

146290
const { assign } = actions;
147291

148-
const machineConfig = {
292+
const myMachineConfig = {
149293
key: 'example3',
150-
strict: true,
151294
context: {
152295
foo: '',
153296
},
@@ -173,16 +316,16 @@ const machineConfig = {
173316
},
174317
};
175318

176-
const machineOptions = {
319+
const myMachineOptions = {
177320
actions: {
178-
myAction: assign({ foo: ctx => 'bar' }),
321+
myAction: assign({ foo: () => 'bar' }),
179322
},
180323
};
181324

182325
const MyComponent = () => (
183326
<Machine
184-
config={machineConfig}
185-
options={machineOptions}
327+
config={myMachineConfig}
328+
options={myMachineOptions}
186329
>
187330
{({ service, state }) => (
188331
<>
@@ -214,10 +357,100 @@ const MyComponent = () => (
214357
);
215358
```
216359

360+
## Example 3 - TypeScript
361+
```tsx
362+
import React from 'react';
363+
import {
364+
MachineConfig, MachineOptions, Machine, State, Interpreter, assign
365+
} from 'react-xstate-js'
366+
367+
interface MyContext {
368+
foo: string
369+
}
370+
371+
interface MyStateSchema {
372+
states: {
373+
step1: {}
374+
step2: {}
375+
step3: {}
376+
}
377+
}
378+
379+
type MyEvent = { type: 'NEXT' }
380+
| { type: 'PREVIOUS' }
381+
382+
const myMachineConfig: MachineConfig<MyContext, MyStateSchema, MyEvent> = {
383+
key: 'example1',
384+
context: {
385+
foo: '',
386+
},
387+
initial: 'step1',
388+
states: {
389+
step1: {
390+
on: {
391+
NEXT: 'step2',
392+
},
393+
},
394+
step2: {
395+
onEntry: ['myAction'],
396+
on: {
397+
PREVIOUS: 'step1',
398+
NEXT: 'step3',
399+
},
400+
},
401+
step3: {
402+
on: {
403+
PREVIOUS: 'step2',
404+
},
405+
},
406+
},
407+
}
408+
409+
const myMachineOptions: MachineOptions<MyContext, MyEvent> = {
410+
actions: {
411+
myAction: assign({ foo: () => 'bar' }),
412+
},
413+
};
414+
415+
const MyComponent: React.SFC = () => (
416+
<Machine
417+
config={myMachineConfig}
418+
options={myMachineOptions}
419+
>
420+
{({ service, state }: { service: Interpreter<MyContext, MyStateSchema, MyEvent>, state: State<MyContext, MyEvent> }) => (
421+
<>
422+
<button
423+
type="button"
424+
onClick={() => service.send({ type: 'PREVIOUS' })}
425+
>
426+
previous
427+
</button>
428+
<button
429+
type="button"
430+
onClick={() => service.send({ type: 'NEXT' })}
431+
>
432+
next
433+
</button>
434+
<p>
435+
state:
436+
{' '}
437+
{JSON.stringify(state.value)}
438+
</p>
439+
<p>
440+
context:
441+
{' '}
442+
{JSON.stringify(state.context)}
443+
</p>
444+
</>
445+
)}
446+
</Machine>
447+
)
448+
```
449+
217450
# API
218451
## \<Machine \/\>
219452
A [React](https://reactjs.org/) interpreter for [xstate](https://github.com/davidkpiano/xstate).
220-
```js
453+
```jsx
221454
<Machine
222455
config={...}
223456
options={...}
@@ -231,9 +464,8 @@ A [React](https://reactjs.org/) interpreter for [xstate](https://github.com/davi
231464
### Props
232465
#### config: xstate [machine config](https://xstate.js.org/api/interfaces/machineconfig.html).
233466
```js
234-
const machineConfig = {
467+
const mmyMachineConfig = {
235468
key: 'example1',
236-
strict: true,
237469
initial: 'step1',
238470
states: {
239471
step1: {
@@ -258,7 +490,7 @@ const machineConfig = {
258490

259491
#### options: xstate [machine options](https://xstate.js.org/api/interfaces/machineoptions.html).
260492
```js
261-
const machineOptions = {
493+
const myMachineOptions = {
262494
actions: {
263495
myAction: () => {
264496
console.log('myAction fired');
@@ -269,7 +501,7 @@ const machineOptions = {
269501

270502
### Return
271503
#### service: xstate [interpreter](https://xstate.js.org/docs/guides/interpretation.html).
272-
```js
504+
```jsx
273505
<Machine {...} >
274506
{({ service }) => (
275507
...
@@ -278,7 +510,7 @@ const machineOptions = {
278510
```
279511

280512
#### state: xstate [state](https://xstate.js.org/api/classes/state.html).
281-
```js
513+
```jsx
282514
<Machine {...} >
283515
{({ state }) => (
284516
...

0 commit comments

Comments
 (0)