{"id":13469562,"url":"https://github.com/beekai-oss/little-state-machine","last_synced_at":"2025-05-14T13:08:28.074Z","repository":{"id":37692982,"uuid":"180249547","full_name":"beekai-oss/little-state-machine","owner":"beekai-oss","description":"📠 React custom hook for persist state management","archived":false,"fork":false,"pushed_at":"2025-01-10T22:02:43.000Z","size":2133,"stargazers_count":1513,"open_issues_count":11,"forks_count":53,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-08T10:30:26.433Z","etag":null,"topics":["flux","react","react-hooks","state","state-machine","state-management"],"latest_commit_sha":null,"homepage":"https://lrz5wloklm.csb.app/","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/beekai-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["bluebill1049"]}},"created_at":"2019-04-08T23:44:46.000Z","updated_at":"2025-05-06T17:10:29.000Z","dependencies_parsed_at":"2024-01-13T20:59:29.263Z","dependency_job_id":"78479e29-abef-4de1-ba8f-6309a596955d","html_url":"https://github.com/beekai-oss/little-state-machine","commit_stats":{"total_commits":479,"total_committers":21,"mean_commits":22.80952380952381,"dds":0.07098121085594988,"last_synced_commit":"8c70eb7636a90dd23e179954eac4b7fd117cefdc"},"previous_names":["bluebill1049/little-state-machine"],"tags_count":121,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Flittle-state-machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Flittle-state-machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Flittle-state-machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Flittle-state-machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beekai-oss","download_url":"https://codeload.github.com/beekai-oss/little-state-machine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253816289,"owners_count":21968807,"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":["flux","react","react-hooks","state","state-machine","state-management"],"created_at":"2024-07-31T15:01:44.960Z","updated_at":"2025-05-14T13:08:27.728Z","avatar_url":"https://github.com/beekai-oss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bluebill1049"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003e📠 Little State Machine\u003c/h1\u003e\n    \nState management made super simple\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm downloads](https://img.shields.io/npm/dm/little-state-machine.svg?style=for-the-badge)](https://www.npmjs.com/package/little-state-machine)\n[![npm](https://img.shields.io/npm/dt/little-state-machine.svg?style=for-the-badge)](https://www.npmjs.com/package/little-state-machine)\n[![npm](https://img.shields.io/bundlephobia/minzip/little-state-machine?style=for-the-badge)](https://bundlephobia.com/result?p=little-state-machine)\n\n\u003c/div\u003e\n\n\u003ch2\u003e✨ Features\u003c/h2\u003e\n\n- Tiny with 0 dependency and simple (715B _gzip_)\n- Persist state by default (`sessionStorage` or `localStorage`)\n- Fine-tune the performance with partial render and selector\n\n\u003ch2\u003e📦 Installation\u003c/h2\u003e\n\n    $ npm install little-state-machine\n\n\u003ch2\u003e🕹 API\u003c/h2\u003e\n\n#### 🔗 `createStore`\n\nFunction to initialize the global store.\n\n```tsx\nfunction log(store) {\n  console.log(store);\n  return store;\n}\n\ncreateStore(\n  {\n    yourDetail: { firstName: '', lastName: '' } // it's an object of your state\n  },\n  {\n     name?: string; // rename the store\n     middleWares?: [ log ]; // function to invoke each action\n     storageType?: Storage; // session/local storage (default to session)\n     persist?: 'action' // onAction is default if not provided\n     // when 'none' is used then state is not persisted\n     // when 'action' is used then state is saved to the storage after store action is completed\n     // when 'beforeUnload' is used then state is saved to storage before page unloa\n  },\n);\n```\n\n#### 🔗 `useStateMachine`\n\nThis hook function will return action/actions and the state of the app.\n\n```tsx\nconst { actions, state, getState } = useStateMachine\u003cT\u003e({\n  actions?: Record\u003cstring, Function\u003e // Optional action to update global state\n  selector?: Function, // Optional selector to isolate re-render based on selected state\n});\n```\n\n\u003ch2\u003e📖 Example\u003c/h2\u003e\n\nCheck out the \u003ca href=\"https://codesandbox.io/p/sandbox/compassionate-forest-ql3f56?workspaceId=ws_4xFLLpCJQLXZtvdkd1DS72\"\u003eDemo\u003c/a\u003e.\n\n```tsx\nimport { createStore, useStateMachine } from 'little-state-machine';\n\ncreateStore({\n  yourDetail: { name: '' },\n});\n\nfunction updateName(state, payload) {\n  return {\n    ...state,\n    yourDetail: {\n      ...state.yourDetail,\n      ...payload,\n    },\n  };\n}\n\nfunction selector(state) {\n  return state.yourDetails.name.length \u003e 10;\n}\n\nfunction YourComponent() {\n  const { actions, state } = useStateMachine({ actions: { updateName } });\n\n  return (\n    \u003cbuttton onClick={() =\u003e actions.updateName({ name: 'bill' })}\u003e\n      {state.yourDetail.name}\n    \u003c/buttton\u003e\n  );\n}\n\nfunction YourComponentSelectorRender() {\n  const { state } = useStateMachine({ selector });\n  return \u003cp\u003e{state.yourDetail.name]\u003c/p\u003e;\n}\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cYourComponent /\u003e\n    \u003cYourComponentSelectorRender /\u003e\n  \u003c/\u003e\n);\n```\n\n## ⌨️ Type Safety (TS)\n\nYou can create a `global.d.ts` file to declare your GlobalState's type.\n\nCheck out the [example](https://codesandbox.io/s/typescript-forked-xs30h).\n\n```ts\nimport 'little-state-machine';\n\ndeclare module 'little-state-machine' {\n  interface GlobalState {\n    yourDetail: {\n      name: string;\n    };\n  }\n}\n```\n\n## ⌨️ Migrate to V5\n\n- `StateMachineProvider` has been removed, simple API\n\n```diff\nconst App = () =\u003e (\n- \u003cStateMachineProvider\u003e\n    \u003cYourComponent /\u003e\n- \u003cStateMachineProvider\u003e\n);\n```\n\n- Actions now is an object payload `useStateMachine({ actions: { updateName } })`\n- Upgrade react \u003e= 18\n\n## By the makers of BEEKAI\n\nWe also make [BEEKAI](https://www.beekai.com/). Build the next-generation forms with modern technology and best in class user experience and accessibility.\n\n\u003ch2\u003e🤝 Contributors\u003c/h2\u003e\n\nThanks go to these wonderful people:\n\n\u003ca href=\"https://github.com/beekai-oss/little-state-machine/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=beekai-oss/little-state-machine\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeekai-oss%2Flittle-state-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeekai-oss%2Flittle-state-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeekai-oss%2Flittle-state-machine/lists"}