@@ -11,13 +11,16 @@ 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+
1416## Example 1 - reading & changing state
1517``` js
1618import React from ' react' ;
1719import { Machine } from ' react-xstate-js' ;
1820
19- const myMachineConfig = {
21+ const machineConfig = {
2022 key: ' example1' ,
23+ strict: true ,
2124 initial: ' step1' ,
2225 states: {
2326 step1: {
@@ -40,7 +43,7 @@ const myMachineConfig = {
4043};
4144
4245const MyComponent = () => (
43- < Machine config= {myMachineConfig }>
46+ < Machine config= {machineConfig }>
4447 {({ service, state }) => (
4548 <>
4649 < button
@@ -71,8 +74,9 @@ const MyComponent = () => (
7174import React from ' react' ;
7275import { Machine } from ' react-xstate-js' ;
7376
74- const myMachineConfig = {
77+ const machineConfig = {
7578 key: ' example2' ,
79+ strict: true ,
7680 initial: ' step1' ,
7781 states: {
7882 step1: {
@@ -95,7 +99,7 @@ const myMachineConfig = {
9599 },
96100};
97101
98- const myMachineOptions = {
102+ const machineOptions = {
99103 actions: {
100104 myAction : () => {
101105 console .log (' myAction fired' );
@@ -105,8 +109,8 @@ const myMachineOptions = {
105109
106110const MyComponent = () => (
107111 < Machine
108- config= {myMachineConfig }
109- options= {myMachineOptions }
112+ config= {machineConfig }
113+ options= {machineOptions }
110114 >
111115 {({ service, state }) => (
112116 <>
@@ -141,8 +145,9 @@ import { actions } from 'xstate';
141145
142146const { assign } = actions;
143147
144- const myMachineConfig = {
148+ const machineConfig = {
145149 key: ' example3' ,
150+ strict: true ,
146151 context: {
147152 foo: ' ' ,
148153 },
@@ -168,16 +173,16 @@ const myMachineConfig = {
168173 },
169174};
170175
171- const myMachineOptions = {
176+ const machineOptions = {
172177 actions: {
173178 myAction: assign ({ foo : ctx => ' bar' }),
174179 },
175180};
176181
177182const MyComponent = () => (
178183 < Machine
179- config= {myMachineConfig }
180- options= {myMachineOptions }
184+ config= {machineConfig }
185+ options= {machineOptions }
181186 >
182187 {({ service, state }) => (
183188 <>
@@ -226,8 +231,9 @@ A [React](https://reactjs.org/) interpreter for [xstate](https://github.com/davi
226231### Props
227232#### config: xstate [ machine config] ( https://xstate.js.org/api/interfaces/machineconfig.html ) .
228233``` js
229- const mmyMachineConfig = {
234+ const machineConfig = {
230235 key: ' example1' ,
236+ strict: true ,
231237 initial: ' step1' ,
232238 states: {
233239 step1: {
@@ -252,7 +258,7 @@ const mmyMachineConfig = {
252258
253259#### options: xstate [ machine options] ( https://xstate.js.org/api/interfaces/machineoptions.html ) .
254260``` js
255- const myMachineOptions = {
261+ const machineOptions = {
256262 actions: {
257263 myAction : () => {
258264 console .log (' myAction fired' );
0 commit comments