{"id":15896465,"url":"https://github.com/brunurd/clado","last_synced_at":"2025-08-18T10:15:36.482Z","repository":{"id":106591626,"uuid":"376457172","full_name":"brunurd/clado","owner":"brunurd","description":"A React state machine based on Context API.","archived":false,"fork":false,"pushed_at":"2024-07-18T15:54:49.000Z","size":185,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-20T15:41:54.000Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/brunurd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-13T06:16:21.000Z","updated_at":"2024-07-02T02:44:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"1ebce970-e46f-4af3-8318-9f82c4d12dc0","html_url":"https://github.com/brunurd/clado","commit_stats":null,"previous_names":["komutilo/clado"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunurd%2Fclado","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunurd%2Fclado/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunurd%2Fclado/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunurd%2Fclado/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunurd","download_url":"https://codeload.github.com/brunurd/clado/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244990050,"owners_count":20543613,"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":[],"created_at":"2024-10-06T09:08:23.395Z","updated_at":"2025-03-22T16:40:31.666Z","avatar_url":"https://github.com/brunurd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Clado\n\n\u003c!-- Badges --\u003e\n[![git last tag][img-github-tag-badge]][link-github-tags] [![npm last version][img-npm-version-badge]][link-npm]\n\nA React state machine based on Context API.\n\n---\n\n## Usage:\n\n### StateMachine\n\nThe main component of `clado` is the `StateMachine`, where you can pass a bunch of components in the `states` using the state name as a key.\n\n```jsx\nimport { StateMachine } from 'clado';\n\nconst App = () =\u003e {\n  return (\n    \u003cmain\u003e\n      \u003ch1\u003eReact State Machine\u003c/h1\u003e\n      \u003cStateMachine\n        initialState=\"a\"\n        states={{\n          a: () =\u003e \u003cComponentA /\u003e,\n          b: () =\u003e \u003cComponentB /\u003e,\n        }}\n      /\u003e\n    \u003c/main\u003e\n  );\n};\n```\n\n### setState\n\nTo change the current state you can use the `setState` function of the `StateMachineContext`.\n\n```jsx\nimport { useStateMachine } from 'clado';\n\nconst ComponentA = () =\u003e {\n  const { setState } = useStateMachine();\n\n  return (\n    \u003c\u003e\n      \u003ch2\u003eComponent A\u003c/h2\u003e\n      \u003cbutton onClick={() =\u003e setState('b')}\u003eGo To B\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n---\n\n## Data Management\n\n### Initial Data\n\nThe `StateMachine` accepts a data object to share data between the states.\n\n```jsx\nimport { StateMachine } from 'clado';\n\nconst App = () =\u003e {\n  return (\n    \u003cmain\u003e\n      \u003ch1\u003eReact State Machine\u003c/h1\u003e\n      \u003cStateMachine\n        data={{\n          textValue: 'a example text',\n        }}\n        initialState=\"a\"\n        states={{\n          a: () =\u003e \u003cComponentA /\u003e,\n          b: () =\u003e \u003cComponentB /\u003e,\n        }}\n      /\u003e\n    \u003c/main\u003e\n  );\n};\n```\n\n### Update Data\n\nThe way to update this data is using the `setState` function of the `StateMachineContext`. It only overrides the passed fields, any other will be preserved.\n\n```jsx\nconst { setState } = useStateMachine();\n\n\u003cbutton\n  onClick={() =\u003e\n    setState('b', {\n      textValue: 'new text value',\n    })\n  }\n\u003e\n  Go To B\n\u003c/button\u003e;\n```\n\n### Reading Data\n\nIs possible to access this data using the `data` returned of the `StateMachineContext`.\n\n```tsx\nconst { data } = useStateMachine\u003c{ textValue: string }\u003e();\n\n\u003ch2\u003e{data.textValue}\u003c/h2\u003e;\n```\n\nOr in the states declaration as a parameter in the function.\n\n```tsx\n\u003cStateMachine\n  data={{\n    textValue: 'a example text',\n  } as \u003c{ textValue: string }\u003e}\n  states={{\n    a: (data) =\u003e \u003cComponentA text={data.textValue} /\u003e,\n    b: (data) =\u003e \u003cComponentB text={data.textValue} /\u003e,\n  }}\n/\u003e\n```\n\n[img-github-tag-badge]:https://img.shields.io/github/v/tag/brunurd/clado?style=flat-square\n[img-npm-version-badge]:https://img.shields.io/npm/v/clado/latest?style=flat-square\n[link-github-tags]:https://github.com/brunurd/clado/tags\n[link-npm]:https://www.npmjs.com/package/clado\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunurd%2Fclado","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunurd%2Fclado","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunurd%2Fclado/lists"}