{"id":21669359,"url":"https://github.com/attack-monkey/reactstate","last_synced_at":"2026-05-10T15:33:19.420Z","repository":{"id":57099638,"uuid":"293921929","full_name":"attack-monkey/reactstate","owner":"attack-monkey","description":"Simple State Management for React","archived":false,"fork":false,"pushed_at":"2020-09-14T19:02:01.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-25T08:44:00.398Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/attack-monkey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-08T20:38:29.000Z","updated_at":"2020-09-14T19:02:03.000Z","dependencies_parsed_at":"2022-08-22T23:10:19.595Z","dependency_job_id":null,"html_url":"https://github.com/attack-monkey/reactstate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attack-monkey%2Freactstate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attack-monkey%2Freactstate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attack-monkey%2Freactstate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attack-monkey%2Freactstate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/attack-monkey","download_url":"https://codeload.github.com/attack-monkey/reactstate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244102855,"owners_count":20398386,"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-11-25T12:21:14.029Z","updated_at":"2026-05-10T15:33:19.405Z","avatar_url":"https://github.com/attack-monkey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reactstate\nSimple State Management for React\n\n## Install\n\n`npm i @attack-monkey/reactstate`\n\n\u003e See Setup \u0026 Typesafety\n\n## How it works\n\n### Add State\n\n- Add state with the `AddState` component.\n- The state stays alive (and available to the whole app) while the component stays alive, which allows you to position the node at the appropriate point in your app.\n- When the AddState component is removed from the view then so is the state that it manages.\n\n```tsx\n\nimport { AddState } from 'reactstate.config'\n\n\u003cMyApp\u003e\n    \u003cAddState id=\"counter1\" init={1}/\u003e\n    \u003cAddState id=\"counter2\" init={1}/\u003e\n\u003c/MyApp\u003e\n\n```\n\n### Connect State into Components\n\nTo subscribe to state use `fromState`. Below we are creating a subscription called 'myComponent', and subscribing to \nboth `counter1` and `counter2`.\n\n```tsx\n\nimport { fromState } from 'reactstate.config.ts'\n\nexport const MyComponent = () =\u003e \n  fromState(\n    'myComponent',\n    ['counter1', 'counter2'], \n    ({ counter1, counter2 }) =\u003e\n      \u003cdiv\u003e\n        \u003ch1\u003e{counter1}\u003c/h1\u003e\n        \u003ch1\u003e{counter2}\u003c/h1\u003e\n      \u003c/div\u003e\n    )\n\n```\n\n... and\n\n```tsx\n\nimport { AddState } from 'reactstate.config'\nimport { MyComponent } from 'components/MyComponent'\n\n\u003cMyApp\u003e\n  \u003cAddState id=\"counter1\" init={1}/\u003e\n  \u003cAddState id=\"counter2\" init={1}/\u003e\n  \u003cMyComponent /\u003e\n\u003c/MyApp\u003e\n\n```\n\n### Mutating State\n\nUse `mutateState` to update state at a particular id.\nHere we use a reusable `increment` function to mutate both 'counter1' and 'counter2' based on which button is pushed.\n\n```tsx\n\nimport { fromState, mutateState } from 'reactstate.config'\n\nconst increment = (stateKey, currentState) =\u003e mutateState(stateKey, currentState + 1)\n\nconst MyComponent = () =\u003e\n  fromState(\n    'myComponent',\n    ['counter1', 'counter2'],\n    ({ counter1, counter2 }) =\u003e\n      \u003cdiv\u003e\n        \u003ch1\u003e{counter1}\u003c/h1\u003e\n        \u003ch1\u003e{counter2}\u003c/h1\u003e\n        \u003cbutton onClick={\n          () =\u003e increment('counter1', counter1)\n        }\u003eIncrement counter 1\u003c/button\u003e\n        \u003cbutton onClick={\n          () =\u003e increment('counter2', counter2)\n        }\u003eIncrement counter 2\u003c/button\u003e\n      \u003c/div\u003e\n  ) \n\n\n```\n\n### Setup \u0026 Typesafety\n\nreactstate works best with typescript\n\n```typescript\n\n// reactstate.config.ts\n\nimport { reactstate } from 'reactstate/lib'\n\nexport interface State {\n  counter1?: number\n  counter2?: number\n}\n\ninterface Subscriptions {\n  counter1?: {\n    myComponent?: (state: State['counter1']) =\u003e void\n  }\n  counter2?: {\n    myComponent?: (state: State['counter2']) =\u003e void\n  }\n}\n\n// bootstrap reactState with State and Subscription info\nexport const { AddState, mutateState, fromState } = reactstate\u003cState, Subscriptions\u003e()\n\n```\n\nWhen you now import `AddState`, `fromState`, and `mutateState`from the above `reactstate.config.ts`, you'll get code hints and type inference - because reactstate knows the state of your app and what's subscribing to it.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattack-monkey%2Freactstate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fattack-monkey%2Freactstate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattack-monkey%2Freactstate/lists"}