{"id":22556053,"url":"https://github.com/munawwar/react-global-states","last_synced_at":"2025-09-21T06:48:06.566Z","repository":{"id":39265550,"uuid":"226720045","full_name":"Munawwar/react-global-states","owner":"Munawwar","description":"A simple global state manager for React","archived":false,"fork":false,"pushed_at":"2023-01-08T02:17:35.000Z","size":4551,"stargazers_count":6,"open_issues_count":48,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T14:29:06.958Z","etag":null,"topics":["global-states","react","react-state-management","react-state-manager","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Munawwar.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":"2019-12-08T19:30:48.000Z","updated_at":"2022-02-24T06:00:17.000Z","dependencies_parsed_at":"2023-02-08T04:17:13.014Z","dependency_job_id":null,"html_url":"https://github.com/Munawwar/react-global-states","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/Munawwar/react-global-states","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Freact-global-states","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Freact-global-states/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Freact-global-states/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Freact-global-states/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Munawwar","download_url":"https://codeload.github.com/Munawwar/react-global-states/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Freact-global-states/sbom","scorecard":{"id":97250,"data":{"date":"2025-08-11","repo":{"name":"github.com/Munawwar/react-global-states","commit":"bc95b4efb19bf57ffaead077837d00862eb06c4e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/27 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"114 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-vxf5-wxwp-m7g9","Warn: Project is vulnerable to: GHSA-9gr3-7897-pp7m","Warn: Project is vulnerable to: GHSA-25mp-g6fv-mqxx","Warn: Project is vulnerable to: GHSA-fmvm-x8mv-47mj","Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc","Warn: Project is vulnerable to: GHSA-g77x-44xx-532m","Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f","Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w","Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf","Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T09:19:20.697Z","repository_id":39265550,"created_at":"2025-08-15T09:19:20.697Z","updated_at":"2025-08-15T09:19:20.697Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276204834,"owners_count":25602738,"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","status":"online","status_checked_at":"2025-09-21T02:00:07.055Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["global-states","react","react-state-management","react-state-manager","state-management"],"created_at":"2024-12-07T19:11:06.080Z","updated_at":"2025-09-21T06:48:06.535Z","avatar_url":"https://github.com/Munawwar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-global-states is a global state store for React projects.\n\nwithout the reducer, dispatch, thunk/saga, nested selector etc ceremonies.\n\n## Quick example\n\n```\nnpm install react-global-states\n```\n\nBefore you start you need to decide whether you need SSR (Server-side rendering) support or just CSR (client-side rendering). SSR significantly changes the way you code/use the library.\n\nCSR Example:\n\nJS\n\n```jsx\nimport { useGlobalState, updateStates } from 'react-global-states';\nconst Component = () =\u003e {\n  // get a specific property from the global store\n  const { name = 'Dan' } = useGlobalState('greeting') || {};\n\n  return (\n    \u003cdiv\u003e\n      Hi {name}\n      {/* for sake of demo, I am not placing the action logic in an action file */}\n      \u003cbutton onClick={() =\u003e updateStates({ greeting: { name: 'everyone' } })}\u003eGreet everyone\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Component;\n```\n\nTS\n\n```jsx\nimport { useGlobalState, updateStates } from './myStore';\nconst Component = () =\u003e {\n  // get a specific property from the global store\n  const { name } = useGlobalState('greeting');\n\n  return (\n    \u003cdiv\u003e\n      Hi {name}\n      {/* for sake of demo, I am not placing the action logic in an action file */}\n      \u003cbutton onClick={() =\u003e updateStates({ greeting: { name: 'everyone' } })}\u003eGreet everyone\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Component;\n```\n```jsx\n// myStore.ts\nimport { createStore, createHooks } from 'react-global-states';\n\ntype MyStore = {\n  greeting: {\n    name: string;\n  }\n}\n\nconst store = createStore\u003cMyStore\u003e({\n  greeting: {\n    name: 'Dan'\n  }\n});\n\nexport const { getStates, updateStates } = store;\nexport const { useGlobalState } = createHooks(store);\n```\n\nSSR Example:\n\nJS\n\n```jsx\nimport { useGlobalState, useStore } from './storeHelpers';\nconst Component = () =\u003e {\n  // get a specific property from the global store\n  const { name = 'Dan' } = useGlobalState('greeting');\n  const { updateStates } = useStore();\n\n  return (\n    \u003cdiv\u003e\n      Hi {name}\n      {/* for sake of demo, I am not placing the action logic in an action file */}\n      \u003cbutton onClick={() =\u003e updateStates({ greeting: { name: 'everyone' }})}\u003eGreet everyone\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Component;\n```\n```jsx\n// storeHelpers.js\nimport { createContextAndHooks } from 'react-global-states';\n\nexport const getInitialState = () =\u003e ({\n  greeting: {\n    name: 'Dan'\n  }\n});\n\nexport const {\n  Context,\n  useGlobalState,\n  useStore,\n} = createContextAndHooks(\n  // optional to pass initial states.. but you get IDE intellisense if you pass it.\n  getInitialState()\n);\n```\n```jsx\n// app.js\nimport { createStore } from 'react-global-states';\nimport { Context, getInitialState } from './storeHelpers';\n\nconst App = () =\u003e {\n  const store = createStore(getInitialState());\n  return (\n    \u003cContext.Provider value={store}\u003e\n      \u003cComponent /\u003e\n    \u003c/Context.Provider\u003e\n  );\n}\nexport default App;\n```\n\nTypeScript\n\n```tsx\nimport { useGlobalState, useStore } from './storeHelpers';\n\nconst Component = () =\u003e {\n  // get a specific property from the global store\n  const { name } = useGlobalState('greeting');\n  const { updateStates } = useStore();\n  return (\n    \u003cdiv\u003e\n      Hi {name}\n      {/* for sake of demo, I am not placing the action logic in an action file */}\n      \u003cbutton onClick={() =\u003e updateStates({ greeting: { name: 'everyone' }})}\u003eGreet everyone\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\nexport default Component;\n```\n```jsx\n// storeHelpers.ts\nimport { createContextAndHooks } from 'react-global-states';\n\ntype MyStore = {\n  greeting: {\n    name: string;\n  }\n}\n\nexport const getInitialState = (): MyStore =\u003e ({\n  greeting: {\n    name: 'Dan'\n  }\n});\n\nexport const {\n  Context,\n  useGlobalState,\n  useStore,\n} = createContextAndHooks\u003cMyStore\u003e();\n```\n```jsx\n// app.js\nimport { createStore } from 'react-global-states';\nimport { Context, getInitialState } from './storeHelpers';\n\nconst App = () =\u003e {\n  const store = createStore(getInitialState());\n  return (\n    \u003cContext.Provider value={store}\u003e\n      \u003cComponent /\u003e\n    \u003c/Context.Provider\u003e\n  );\n}\nexport default App;\n```\n\n# Contents\n\n* [Action File](#action-file)\n* [Initial States](#initial-states)\n* [Notes](#notes)\n* [Play with it](#play-with-it)\n* [API Reference](#api-reference)\n## Action file\n\nIt is good practice to move the updateStates() calls to separate \"action\" file. For e.g. you can unit test the actions without having to test the UI components as well.\n\nactions/greeting.js\n```js\nexport const updateName = (store, name) =\u003e {\n  store.updateStates({ greeting: { name }});\n}\n```\n\nAnd you can change the component to the following:\n```jsx\nimport { useStore } from 'react-global-states';\nimport * as greetingActions from '../actions/greeting';\n\nconst Component = () =\u003e {\n  const store = useStore();\n  // ...\n      \u003cbutton onClick={() =\u003e greetingActions.updateName(store, 'everyone')}\u003eGreet everyone\u003c/button\u003e\n  // ...\n}\n```\n\nNote: Actions can be async functions (yay! no thunk/saga required).\n\nWithin the action file you can't use hooks though. Instead you can use getStates() to get the current states from the store.\n\n```js\nexport const someAction = (store, name) =\u003e {\n  const allGlobalStatesOfTheStore = store.getStates(); // you get all the properties of the store\n  const { greeting } = allGlobalStatesOfTheStore;\n  // ...\n}\n```\n\n## Initial States\n\nIf you are using TypeScript or if you are creating an new store, you get the ability to set initial states of the store while creating the store:\n\n```ts\nimport { createStore } from 'react-global-states';\n\nconst getInitialStates = ():MyStore =\u003e ({\n  greeting: {\n    name: 'Dan'\n  }\n});\ncreateStore\u003cMyStore\u003e(initialStates);\n```\n\nHowever if you are using the default store, you can initialize the store using `setStates()`.\n\n```js\nimport { setStates } from 'react-global-states';\n\nsetStates({\n  greeting: {\n    name: 'Dan'\n  }\n});\n```\n\n`setStates()` simply replaces the entire store.\n\n## Notes\n\n\n### Reactivity\n\nThe library only reacts to changes in level 1 and level 2 properties of the store object.\n\nThis may seem like an arbitrary decision, but from previous experience with libraries like Redux on large projects, it is mostly not a good idea to have highly nested global store. Mostly because managing a tree is a lot harder. It involves selectors and re-mapping store properties to new names etc to improve performance, all of which adds unnecessary complexities/cognitive load, which could have been avoided if you flatten the global store in the first place. `react-global-states` takes that as good practice and enforces it here.\n\n**So what happens if there is a third level of nesting?**\nWell the library will only do a JS strict equality check (=== operator), unlike the first two levels where individual properties are checked. Render performance could take a hit if you nest the global store beyond 3 and more levels.\nSo if you do change 3rd or 4th level (or more) object,  make sure that you create a new 3rd level object everytime (using spread or whatever), so that component re-rendering is triggered.\n\n### Q: \"Why is SSR more complex\"?\n\nAnswer: Each server request for a page needs it's own states. Sharing states across requests does not work well in async rendering libraries like `next.js`. Which means each request needs a new store, passed to components via a Context. But that makes libraries more complex to use.\n\n### Zombie child \u0026 stale props problem\n\nRedux documents [two issues](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) they had to tackle named \"zombie child\" and \"state props\" problems.\n\nThe common pattern between the two issues is the use of component props to select a global state. `react-global-states` does not support dynamic selectors, rather get all the data you need and make the conditional decision in render code. This happens to be a good thing here, as both classes of issues are not possible with static selectors.\n\n### Usage with Multiple renderers\n\nWhen using `react-global-states` with multiple renderers (e.g. react-three-fiber inside react), you will have to implement a [solution mentioned in this thread by franciscop-sc](https://github.com/facebook/react/issues/13332#issuecomment-513088081).\n\n## Play with it\n\nGo to examples directory\n```\nyarn install\nyarn start\n```\nand start playing with the example.\n\n## API Reference\n\n#### useGlobalState(propName)\n\nReact hook to fetch a property from the the global store. Using the hook also associates the component with the property.\n\nParameters:\n\npropName: Property names (string) you want to fetch from global store\n\nReturns: The property you asked for. If a value doesn't exist you get undefined.\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### getStates()\n\nReturns: the entire global store. You can use this outside of a component (example: in an action file).\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### setStates(newStore\u0026lt;Object\u0026gt;)\n\nReplaces your entire store with the `newStore` object you pass.\n\nParameters:\n\nnewStore: The new store object.\n\nReturns: No return value\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### updateStates(partial\u0026lt;Object\u0026gt;)\n\nFunction to update multiple states on the global store. updateStates will merge new states upto two levels of the store.\n\nSo let's say your store looks likes the following:\n\n```js\n{\n  prop1: { a: 1 },\n  prop2: { b: 2 },\n}\n```\n\nand you do an update as below:\n```js\nupdateStates({\n  prop1: { a: 0 },\n  prop2: { d: 4 },\n  prop3: { c: 3 },\n});\n```\n\nthen the resultant global store will look like:\n```js\n{\n  prop1: { a: 0 },\n  prop2: { b: 2, d: 4 },\n  prop3: { c: 3 },\n}\n```\n\nParameters:\n\npartial: An partial store object that would be used to update the store.\n\nReturns: No return value\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### useStore()\n\nReturns: Store methods for the store that was connected via context provider.\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### createPropUpdater(propName\u0026lt;String\u0026gt;)\n\nReturns a function that can be used to update a specific prop from the store. This is only needed if prop value is an object which you want to incrementally update.\n\nThis is a convenience function. You can achieve what you want with updateStates() function alone if you wish.\n\nArguments:\n\npropName: The prop name whose sub/inner properties that you want to ultimately update.\n\nReturns: A function that you can call (any number of times) to incrementally update the prop's sub/inner properties.\n\nExample:\n\n```js\n// without createPropUpdater()\nconst resetCart = () =\u003e updateStates({ cart: { items: [] } });\nconst setCartItems = (items) =\u003e updateStates({ cart: { items } });\n// ...\n\n// with createPropUpdater()\nconst updateCart = createPropUpdater('cart');\nconst resetCart = () =\u003e updateCart({ items: [] });\nconst setCartItems = (items) =\u003e updateCart({ items });\n// .. the more actions you have that is updating cart, the more useful createPropUpdater() becomes.\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### createStore(initialStoreProps: Object)\n\nCreates a new store and returns an object with functions with same name \u0026 interface as the APIs mentioned above (i.e. store.getStates()) to manage the new store.\n\nThere are two use-cases for creating a fresh store, instead of using the default store:\n\n1. You are using TypeScript: For type checks to work you need to define your Store's interface. The default store accepts any props, which won't give you strict type check.\n\n2. You are writing a library/module that is expected to be used with any react app: In which case polluting the default store with props can cause naming collision with the consumer of your library. Creating new store avoids prop name collisions for libraries.\n\nParameters:\n\ninitialStoreProps (optional): An object with properties to initialize your store with.\n\nReturns: An object with functions to use the new store.\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Breaking changes v4\n\nuseGlobalStates() is removed, instead use useGlobalState() (singular).\n\n```js\n// old api\nconst { cart: { quantity } } = useGlobalStates(['cart']);\n// new api\nconst { quantity } = useGlobalState('cart');\n```\n\n## Changes v3.1\n\n* Bring back createSubPropUpdater(). But it's named createPropUpdater() instead.\n\n## Breaking changes v3\n\n* updatesStates() now will merge 2nd level properties unlike v2 which only merged 1st level properties.\n\n* Renamed createSubPropUpdater() method. updateStates() now can do the same job. However if you really need the compatibility, then you can implement it as follows:\n\n```js\nimport { updateStates } from 'react-global-states';\nconst createSubPropUpdater = (propName) =\u003e (partial) =\u003e updateStates({ [propName]: partial });\n```\n\n* no more ES5 support. distributions are in ES6\n\n## Future work\n\nSupport for react concurrent mode. From the current [useMutableSource` RFC](https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md#redux-stores) it seems like we can support concurrent mode without public API change. This is just theoretical at the moment.. things could change.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunawwar%2Freact-global-states","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmunawwar%2Freact-global-states","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunawwar%2Freact-global-states/lists"}