The main idea of the library is to provide an easy way to write React UIs based on XState machines using components only (or mainly). Instead of writing imperactive coding, creating functions to trigger events or creating complex hooks, you can focus in writing components that communicate with your machine, render desired data when a machine state matches and stuffs like that.
Try it out on the playground - https://marceloadsj.github.io/jsxstate/
npm install jsxstate
# or
yarn add jsxstate
Peer dependencies: react xstate @xstate/react
You can find each API individually below:
Interpret - How to start a machine and provide it on React context
Value - How to render the finite or infinite state of a machine
Send - How to trigger events on a machine
Matches - How to render components based on a finite or infinite state
useContextMachine - How to access the machines on the context
useMatches - How to get booleans based on finite or infinite state
useSend - How to get triggers to send events to the machine
useValue - How to access machine finite or infinite states
Those are not exported, but you can read how they works under the hood
MachineContext - How React context works inside the library
Version 1
- [x] Simple playground with editor and real time result
- [x] Basic components (Interpret, Value, Send, Matches)
- [x] Tests for all components
- [x] Documentation for all components
- [x] Targeting machines by configurable id/machineId on components
- [x] Basic hooks (useContextMachine, useValue, useSend, useMatches)
- [ ] Tests for all hooks
- [x] Documentation for all hooks
- [x] Targeting machines by configurable id/machineId on hooks
- [x] Everything written in Typescript (appart of the example/playground)
MIT © marceloadsj