Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phenax/use-tiny-state-machine
A tiny (~700 bytes) react hook to help you write finite state machines
https://github.com/phenax/use-tiny-state-machine
finite-state-machine hooks react state-machine
Last synced: 3 months ago
JSON representation
A tiny (~700 bytes) react hook to help you write finite state machines
- Host: GitHub
- URL: https://github.com/phenax/use-tiny-state-machine
- Owner: phenax
- License: mit
- Created: 2019-04-07T14:05:59.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T21:32:22.000Z (about 2 years ago)
- Last Synced: 2024-05-02T05:53:43.551Z (10 months ago)
- Topics: finite-state-machine, hooks, react, state-machine
- Language: JavaScript
- Homepage: https://github.com/phenax/use-tiny-state-machine/tree/master/docs
- Size: 1.15 MB
- Stars: 38
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# useTinyStateMachine
A tiny (~700 bytes) react hook to help you write finite state machines
[](https://circleci.com/gh/phenax/use-tiny-state-machine)
[](https://www.npmjs.com/package/use-tiny-state-machine)
[](https://codecov.io/gh/phenax/use-tiny-state-machine)
[Read the documentation for more information](https://github.com/phenax/use-tiny-state-machine/tree/master/docs)
## Install
#### Import
```bash
yarn add use-tiny-state-machine
```
## Examples
### Manual traffic lights
```js
import useTinyStateMachine from 'use-tiny-state-machine';
const stateChart = {
id: 'traffixLight',
initial: 'green',
states: {
green: { on: { NEXT: 'red' } },
orange: { on: { NEXT: 'green' } },
red: { on: { NEXT: 'orange' } },
},
};
export default function ManualTrafficLights() {
const { cata, state, dispatch } = useTinyStateMachine(stateChart);
return (
The light is {state}
dispatch('NEXT')}>Next light
);
};
```
### Automated traffic lights with onEntry action
`onEntry` is called every time you enter a given state. `onEntry` is called with the current state machine instance.
```js
import useTinyStateMachine from 'use-tiny-state-machine';
const stateChart = {
id: "traffixLight",
initial: "green",
states: {
green: {
onEntry: waitForNextLight,
on: {
NEXT: "red"
}
},
orange: {
onEntry: waitForNextLight,
on: {
NEXT: "green"
}
},
red: {
onEntry: waitForNextLight,
on: {
NEXT: "orange"
}
}
}
};
function waitForNextLight({ dispatch }) {
const timer = setTimeout(() => dispatch('NEXT'), 1000);
return () => clearTimeout(timer);
}
function TrafficLights() {
const { cata, state, dispatch } = useTinyStateMachine(stateChart);
return (
The light is {state}
dispatch("NEXT")}>Force next light
);
}
```
### Fetching data
You can use context to store any data associated with a state.
```js
const stateChart = {
id: 'userData',
initial: 'idle',
context: {
data: null,
error: null,
},
states: {
idle: {
on: {
FETCH: {
target: 'pending',
action: ({ dispatch }, userId) => {
fetchUser(userId)
.then(user => dispatch('SUCCESS', user))
.catch(error => dispatch('FAILURE', error));
},
},
},
},
pending: {
on: {
SUCCESS: {
target: 'success',
beforeStateChange: ({ updateContext }, data) => updateContext(c => ({ ...c, data })),
},
FAILURE: {
target: 'failure',
beforeStateChange: ({ updateContext }, error) => updateContext(c => ({ ...c, error })),
},
},
},
},
};
const UserData = () => {
const { context, dispatch, cata } = useTinyStateMachine(stateChart);
return (
{cata({
idle: () => (
dispatch('FETCH')}>
Fetch user data
),
pending: () => ,
success: () => `Hi ${context.data.name}`,
failure: () => `Error: ${context.error.message}`,
})}
);
};
```