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

Commit

Permalink
Add typeScript examples to README
Browse files Browse the repository at this point in the history
  • Loading branch information
@bradwoods
bradwoods committed Dec 29, 2018
1 parent 5922e00 commit 00f11da
Showing 1 changed file with 255 additions and 23 deletions.
278 changes: 255 additions & 23 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,13 @@ npm i react-xstate-js -S
```

# Using
A playground with the following examples can be found [here](https://github.com/bradwoods/react-xstate-js-playground).

## Example 1 - reading & changing state
```js
import React from 'react';
import { Machine } from 'react-xstate-js';

const machineConfig = {
const myMachineConfig = {
key: 'example1',
strict: true,
initial: 'step1',
states: {
step1: {
Expand All @@ -43,7 +40,7 @@ const machineConfig = {
};

const MyComponent = () => (
<Machine config={machineConfig}>
<Machine config={myMachineConfig}>
{({ service, state }) => (
<>
<button
Expand All @@ -69,14 +66,81 @@ const MyComponent = () => (
);
```

## Example 1 - TypeScript
```tsx
import React from 'react';
import {
MachineConfig, Machine, State, Interpreter
} from 'react-xstate-js'

interface MyStateSchema {
states: {
step1: {}
step2: {}
step3: {}
}
}

type MyEvent = { type: 'NEXT' }
| { type: 'PREVIOUS' }

const myMachineConfig: MachineConfig<{}, MyStateSchema, MyEvent> = {
key: 'example1',
initial: 'step1',
states: {
step1: {
on: {
NEXT: 'step2',
},
},
step2: {
on: {
PREVIOUS: 'step1',
NEXT: 'step3',
},
},
step3: {
on: {
PREVIOUS: 'step2',
},
},
},
}

const MyComponent: React.SFC = () => (
<Machine config={myMachineConfig}>
{({ service, state }: { service: Interpreter<{}, MyStateSchema, MyEvent>, state: State<{}, MyEvent> }) => (
<>
<button
type="button"
onClick={() => service.send({ type: 'PREVIOUS' })}
>
previous
</button>
<button
type="button"
onClick={() => service.send({ type: 'NEXT' })}
>
next
</button>
<p>
state:
{' '}
{JSON.stringify(state.value)}
</p>
</>
)}
</Machine>
)
```

## Example 2 - options (with actions)
```js
import React from 'react';
import { Machine } from 'react-xstate-js';

const machineConfig = {
const myMachineConfig = {
key: 'example2',
strict: true,
initial: 'step1',
states: {
step1: {
Expand All @@ -99,7 +163,7 @@ const machineConfig = {
},
};

const machineOptions = {
const myMachineOptions = {
actions: {
myAction: () => {
console.log('myAction fired');
Expand All @@ -109,8 +173,8 @@ const machineOptions = {

const MyComponent = () => (
<Machine
config={machineConfig}
options={machineOptions}
config={myMachineConfig}
options={myMachineOptions}
>
{({ service, state }) => (
<>
Expand All @@ -137,17 +201,96 @@ const MyComponent = () => (
);
```

## Example 2 - TypeScript
```tsx
import React from 'react';
import {
MachineConfig, MachineOptions, Machine, State, Interpreter
} from 'react-xstate-js'

interface MyStateSchema {
states: {
step1: {}
step2: {}
step3: {}
}
}

type MyEvent = { type: 'NEXT' }
| { type: 'PREVIOUS' }

const myMachineConfig: MachineConfig<{}, MyStateSchema, MyEvent> = {
key: 'example1',
initial: 'step1',
states: {
step1: {
on: {
NEXT: 'step2',
},
},
step2: {
onEntry: ['myAction'],
on: {
PREVIOUS: 'step1',
NEXT: 'step3',
},
},
step3: {
on: {
PREVIOUS: 'step2',
},
},
},
}

const myMachineOptions: MachineOptions<{}, MyEvent> = {
actions: {
myAction: () => {
console.log('myAction fired');
},
},
};

const MyComponent: React.SFC = () => (
<Machine
config={myMachineConfig}
options={myMachineOptions}
>
{({ service, state }: { service: Interpreter<{}, MyStateSchema, MyEvent>, state: State<{}, MyEvent> }) => (
<>
<button
type="button"
onClick={() => service.send({ type: 'PREVIOUS' })}
>
previous
</button>
<button
type="button"
onClick={() => service.send({ type: 'NEXT' })}
>
next
</button>
<p>
state:
{' '}
{JSON.stringify(state.value)}
</p>
</>
)}
</Machine>
)
```

## Example 3 - context
```js
```jsx
import React from 'react';
import { Machine } from 'react-xstate-js';
import { actions } from 'xstate';

const { assign } = actions;

const machineConfig = {
const myMachineConfig = {
key: 'example3',
strict: true,
context: {
foo: '',
},
Expand All @@ -173,16 +316,16 @@ const machineConfig = {
},
};

const machineOptions = {
const myMachineOptions = {
actions: {
myAction: assign({ foo: ctx => 'bar' }),
myAction: assign({ foo: () => 'bar' }),
},
};

const MyComponent = () => (
<Machine
config={machineConfig}
options={machineOptions}
config={myMachineConfig}
options={myMachineOptions}
>
{({ service, state }) => (
<>
Expand Down Expand Up @@ -214,10 +357,100 @@ const MyComponent = () => (
);
```

## Example 3 - TypeScript
```tsx
import React from 'react';
import {
MachineConfig, MachineOptions, Machine, State, Interpreter, assign
} from 'react-xstate-js'

interface MyContext {
foo: string
}

interface MyStateSchema {
states: {
step1: {}
step2: {}
step3: {}
}
}

type MyEvent = { type: 'NEXT' }
| { type: 'PREVIOUS' }

const myMachineConfig: MachineConfig<MyContext, MyStateSchema, MyEvent> = {
key: 'example1',
context: {
foo: '',
},
initial: 'step1',
states: {
step1: {
on: {
NEXT: 'step2',
},
},
step2: {
onEntry: ['myAction'],
on: {
PREVIOUS: 'step1',
NEXT: 'step3',
},
},
step3: {
on: {
PREVIOUS: 'step2',
},
},
},
}

const myMachineOptions: MachineOptions<MyContext, MyEvent> = {
actions: {
myAction: assign({ foo: () => 'bar' }),
},
};

const MyComponent: React.SFC = () => (
<Machine
config={myMachineConfig}
options={myMachineOptions}
>
{({ service, state }: { service: Interpreter<MyContext, MyStateSchema, MyEvent>, state: State<MyContext, MyEvent> }) => (
<>
<button
type="button"
onClick={() => service.send({ type: 'PREVIOUS' })}
>
previous
</button>
<button
type="button"
onClick={() => service.send({ type: 'NEXT' })}
>
next
</button>
<p>
state:
{' '}
{JSON.stringify(state.value)}
</p>
<p>
context:
{' '}
{JSON.stringify(state.context)}
</p>
</>
)}
</Machine>
)
```

# API
## \<Machine \/\>
A [React](https://reactjs.org/) interpreter for [xstate](https://github.com/davidkpiano/xstate).
```js
```jsx
<Machine
config={...}
options={...}
Expand All @@ -231,9 +464,8 @@ A [React](https://reactjs.org/) interpreter for [xstate](https://github.com/davi
### Props
#### config: xstate [machine config](https://xstate.js.org/api/interfaces/machineconfig.html).
```js
const machineConfig = {
const mmyMachineConfig = {
key: 'example1',
strict: true,
initial: 'step1',
states: {
step1: {
Expand All @@ -258,7 +490,7 @@ const machineConfig = {

#### options: xstate [machine options](https://xstate.js.org/api/interfaces/machineoptions.html).
```js
const machineOptions = {
const myMachineOptions = {
actions: {
myAction: () => {
console.log('myAction fired');
Expand All @@ -269,7 +501,7 @@ const machineOptions = {

### Return
#### service: xstate [interpreter](https://xstate.js.org/docs/guides/interpretation.html).
```js
```jsx
<Machine {...} >
{({ service }) => (
...
Expand All @@ -278,7 +510,7 @@ const machineOptions = {
```

#### state: xstate [state](https://xstate.js.org/api/classes/state.html).
```js
```jsx
<Machine {...} >
{({ state }) => (
...
Expand Down

0 comments on commit 00f11da

Please sign in to comment.