{"id":20565766,"url":"https://github.com/phenax/use-tiny-state-machine","last_synced_at":"2025-04-14T15:35:32.302Z","repository":{"id":34533700,"uuid":"179974720","full_name":"phenax/use-tiny-state-machine","owner":"phenax","description":"A tiny (~700 bytes) react hook to help you write finite state machines","archived":false,"fork":false,"pushed_at":"2022-12-08T21:32:22.000Z","size":1205,"stargazers_count":38,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-02T05:53:43.551Z","etag":null,"topics":["finite-state-machine","hooks","react","state-machine"],"latest_commit_sha":null,"homepage":"https://github.com/phenax/use-tiny-state-machine/tree/master/docs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phenax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-07T14:05:59.000Z","updated_at":"2023-05-23T11:03:30.000Z","dependencies_parsed_at":"2023-01-15T07:37:02.487Z","dependency_job_id":null,"html_url":"https://github.com/phenax/use-tiny-state-machine","commit_stats":null,"previous_names":["phenax/use-state-machine"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fuse-tiny-state-machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fuse-tiny-state-machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fuse-tiny-state-machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fuse-tiny-state-machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phenax","download_url":"https://codeload.github.com/phenax/use-tiny-state-machine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248906931,"owners_count":21181245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["finite-state-machine","hooks","react","state-machine"],"created_at":"2024-11-16T04:39:02.360Z","updated_at":"2025-04-14T15:35:32.282Z","avatar_url":"https://github.com/phenax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# useTinyStateMachine\nA tiny (~700 bytes) react hook to help you write finite state machines\n\n[![CircleCI](https://img.shields.io/circleci/project/github/phenax/use-tiny-state-machine/master.svg?style=for-the-badge)](https://circleci.com/gh/phenax/use-tiny-state-machine)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/use-tiny-state-machine.svg?style=for-the-badge)](https://www.npmjs.com/package/use-tiny-state-machine)\n[![Codecov](https://img.shields.io/codecov/c/github/phenax/use-tiny-state-machine.svg?style=for-the-badge)](https://codecov.io/gh/phenax/use-tiny-state-machine)\n\n\n[Read the documentation for more information](https://github.com/phenax/use-tiny-state-machine/tree/master/docs)\n\n## Install\n\n#### Import\n```bash\nyarn add use-tiny-state-machine\n```\n\n\n## Examples\n\n### Manual traffic lights\n\n```js\nimport useTinyStateMachine from 'use-tiny-state-machine';\n\nconst stateChart = {\n  id: 'traffixLight',\n  initial: 'green',\n  states: {\n    green: { on: { NEXT: 'red' } },\n    orange: { on: { NEXT: 'green' } },\n    red: { on: { NEXT: 'orange' } },\n  },\n};\n\nexport default function ManualTrafficLights() {\n  const { cata, state, dispatch } = useTinyStateMachine(stateChart);\n\n  return (\n    \u003cFragment\u003e\n      \u003cdiv\n        className=\"trafficLight\"\n        style={{\n          backgroundColor: cata({\n            green: '#51e980',\n            red: '#e74c3c',\n            orange: '#ffa500',\n          }),\n        }}\n      \u003e\n        The light is {state}\n      \u003c/div\u003e\n      \u003cbutton onClick={() =\u003e dispatch('NEXT')}\u003eNext light\u003c/button\u003e\n    \u003c/Fragment\u003e\n  );\n};\n```\n\n\n### Automated traffic lights with onEntry action\n`onEntry` is called every time you enter a given state. `onEntry` is called with the current state machine instance.\n\n```js\nimport useTinyStateMachine from 'use-tiny-state-machine';\n\nconst stateChart = {\n  id: \"traffixLight\",\n  initial: \"green\",\n  states: {\n    green: {\n      onEntry: waitForNextLight,\n      on: {\n        NEXT: \"red\"\n      }\n    },\n    orange: {\n      onEntry: waitForNextLight,\n      on: {\n        NEXT: \"green\"\n      }\n    },\n    red: {\n      onEntry: waitForNextLight,\n      on: {\n        NEXT: \"orange\"\n      }\n    }\n  }\n};\n\nfunction waitForNextLight({ dispatch }) {\n  const timer = setTimeout(() =\u003e dispatch('NEXT'), 1000);\n  return () =\u003e clearTimeout(timer);\n}\n\nfunction TrafficLights() {\n  const { cata, state, dispatch } = useTinyStateMachine(stateChart);\n\n  return (\n    \u003cFragment\u003e\n      \u003cdiv\n        style={{\n          width: \"30px\",\n          height: \"30px\",\n          backgroundColor: cata({\n            green: \"#51e980\",\n            red: \"#e74c3c\",\n            orange: \"#ffa500\"\n          })\n        }}\n      \u003e\n        The light is {state}\n      \u003c/div\u003e\n      \u003cbutton onClick={() =\u003e dispatch(\"NEXT\")}\u003eForce next light\u003c/button\u003e\n    \u003c/Fragment\u003e\n  );\n}\n```\n\n\n### Fetching data\nYou can use context to store any data associated with a state.\n\n```js\nconst stateChart = {\n  id: 'userData',\n  initial: 'idle',\n  context: {\n    data: null,\n    error: null,\n  },\n  states: {\n    idle: {\n      on: {\n        FETCH: {\n          target: 'pending',\n          action: ({ dispatch }, userId) =\u003e {\n            fetchUser(userId)\n              .then(user =\u003e dispatch('SUCCESS', user))\n              .catch(error =\u003e dispatch('FAILURE', error));\n          },\n        },\n      },\n    },\n    pending: {\n      on: {\n        SUCCESS: {\n          target: 'success',\n          beforeStateChange: ({ updateContext }, data) =\u003e updateContext(c =\u003e ({ ...c, data })),\n        },\n        FAILURE: {\n          target: 'failure',\n          beforeStateChange: ({ updateContext }, error) =\u003e updateContext(c =\u003e ({ ...c, error })),\n        },\n      },\n    },\n  },\n};\n\nconst UserData = () =\u003e {\n  const { context, dispatch, cata } = useTinyStateMachine(stateChart);\n  return (\n    \u003cdiv\u003e\n      {cata({\n        idle: () =\u003e (\n          \u003cbutton onClick={() =\u003e dispatch('FETCH')}\u003e\n            Fetch user data\n          \u003c/button\u003e\n        ),\n        pending: () =\u003e \u003cSpinner /\u003e,\n        success: () =\u003e `Hi ${context.data.name}`,\n        failure: () =\u003e `Error: ${context.error.message}`,\n      })}\n    \u003c/div\u003e\n  );\n};\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Fuse-tiny-state-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphenax%2Fuse-tiny-state-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Fuse-tiny-state-machine/lists"}