{"id":13429548,"url":"https://github.com/dai-shi/react-hooks-global-state","last_synced_at":"2025-05-15T02:06:11.511Z","repository":{"id":33205777,"uuid":"154989763","full_name":"dai-shi/react-hooks-global-state","owner":"dai-shi","description":"[NOT MAINTAINED] Simple global state for React with Hooks API without Context API","archived":false,"fork":false,"pushed_at":"2023-08-29T08:16:18.000Z","size":2980,"stargazers_count":1102,"open_issues_count":6,"forks_count":61,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-05T09:05:36.258Z","etag":null,"topics":["function-components","hooks-api-react","react","state-management","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-hooks-global-state","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/dai-shi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2018-10-27T17:15:19.000Z","updated_at":"2025-03-28T18:53:26.000Z","dependencies_parsed_at":"2024-06-18T12:28:41.741Z","dependency_job_id":"4b929813-f419-40cb-bec4-a39e0af32f59","html_url":"https://github.com/dai-shi/react-hooks-global-state","commit_stats":{"total_commits":248,"total_committers":10,"mean_commits":24.8,"dds":"0.10080645161290325","last_synced_commit":"c30fbe8125e929a175b4fe65847f0bd433b670b9"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-global-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-global-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-global-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-global-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dai-shi","download_url":"https://codeload.github.com/dai-shi/react-hooks-global-state/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259370,"owners_count":22040819,"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":["function-components","hooks-api-react","react","state-management","typescript"],"created_at":"2024-07-31T02:00:41.561Z","updated_at":"2025-05-15T02:06:11.490Z","avatar_url":"https://github.com/dai-shi.png","language":"TypeScript","funding_links":[],"categories":["Packages","react","TypeScript","Frameworks"],"sub_categories":["State of the React"],"readme":"This project is no longer maintained.\nPlease directly use [Zustand](https://github.com/pmndrs/zustand).\n\n---\n\n# react-hooks-global-state\n\n[![CI](https://img.shields.io/github/actions/workflow/status/dai-shi/react-hooks-global-state/ci.yml?branch=main)](https://github.com/dai-shi/react-hooks-global-state/actions?query=workflow%3ACI)\n[![npm](https://img.shields.io/npm/v/react-hooks-global-state)](https://www.npmjs.com/package/react-hooks-global-state)\n[![size](https://img.shields.io/bundlephobia/minzip/react-hooks-global-state)](https://bundlephobia.com/result?p=react-hooks-global-state)\n[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)\n\nSimple global state for React with Hooks API without Context API\n\n## Introduction\n\nThis is a library to provide a global state with React Hooks.\nIt has following characteristics.\n\n*   Optimization for shallow state getter and setter.\n    *   The library cares the state object only one-level deep.\n*   TypeScript type definitions\n    *   A creator function creates hooks with types inferred.\n*   Redux middleware support to some extent\n    *   Some of libraries in Redux ecosystem can be used.\n\n## Install\n\n```bash\nnpm install react-hooks-global-state\n```\n\n## Usage\n\n### setState style\n\n```javascript\nimport React from 'react';\nimport { createGlobalState } from 'react-hooks-global-state';\n\nconst initialState = { count: 0 };\nconst { useGlobalState } = createGlobalState(initialState);\n\nconst Counter = () =\u003e {\n  const [count, setCount] = useGlobalState('count');\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003eCounter: {count}\u003c/span\u003e\n      {/* update state by passing callback function */}\n      \u003cbutton onClick={() =\u003e setCount(v =\u003e v + 1)}\u003e+1\u003c/button\u003e\n      {/* update state by passing new value */}\n      \u003cbutton onClick={() =\u003e setCount(count - 1)}\u003e-1\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cCounter /\u003e\n    \u003cCounter /\u003e\n  \u003c/\u003e\n);\n```\n\n### reducer style\n\n```javascript\nimport React from 'react';\nimport { createStore } from 'react-hooks-global-state';\n\nconst reducer = (state, action) =\u003e {\n  switch (action.type) {\n    case 'increment': return { ...state, count: state.count + 1 };\n    case 'decrement': return { ...state, count: state.count - 1 };\n    default: return state;\n  }\n};\nconst initialState = { count: 0 };\nconst { dispatch, useStoreState } = createStore(reducer, initialState);\n\nconst Counter = () =\u003e {\n  const value = useStoreState('count');\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003eCounter: {value}\u003c/span\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: 'increment' })}\u003e+1\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: 'decrement' })}\u003e-1\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cCounter /\u003e\n    \u003cCounter /\u003e\n  \u003c/\u003e\n);\n```\n\n## API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n### createGlobalState\n\nCreate a global state.\n\nIt returns a set of functions\n\n*   `useGlobalState`: a custom hook works like React.useState\n*   `getGlobalState`: a function to get a global state by key outside React\n*   `setGlobalState`: a function to set a global state by key outside React\n*   `subscribe`: a function that subscribes to state changes\n\n#### Parameters\n\n*   `initialState` **State** \n\n#### Examples\n\n```javascript\nimport { createGlobalState } from 'react-hooks-global-state';\n\nconst { useGlobalState } = createGlobalState({ count: 0 });\n\nconst Component = () =\u003e {\n  const [count, setCount] = useGlobalState('count');\n  ...\n};\n```\n\n### createStore\n\nCreate a global store.\n\nIt returns a set of functions\n\n*   `useStoreState`: a custom hook to read store state by key\n*   `getState`: a function to get store state by key outside React\n*   `dispatch`: a function to dispatch an action to store\n\nA store works somewhat similarly to Redux, but not the same.\n\n#### Parameters\n\n*   `reducer` **Reducer\\\u003cState, Action\u003e** \n*   `initialState` **State**  (optional, default `(reducer as any)(undefined,{type:undefined})`)\n*   `enhancer` **any?** \n\n#### Examples\n\n```javascript\nimport { createStore } from 'react-hooks-global-state';\n\nconst initialState = { count: 0 };\nconst reducer = ...;\n\nconst store = createStore(reducer, initialState);\nconst { useStoreState, dispatch } = store;\n\nconst Component = () =\u003e {\n  const count = useStoreState('count');\n  ...\n};\n```\n\nReturns **Store\\\u003cState, Action\u003e** \n\n### useGlobalState\n\nuseGlobalState created by createStore is deprecated.\n\nType: function (stateKey: StateKey): any\n\n**Meta**\n\n*   **deprecated**: useStoreState instead\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open \u003chttp://localhost:8080\u003e in your web browser.\n\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/01\\_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/02\\_typescript)\n[03](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/03\\_actions)\n[04](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/04\\_fetch)\n[05](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/05\\_onmount)\n[06](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/06\\_reducer)\n[07](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/07\\_middleware)\n[08](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/08\\_thunk)\n[09](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/09\\_comparison)\n[10](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/10\\_immer)\n[11](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/11\\_deep)\n[13](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/13\\_persistence)\n\n## Blogs\n\n*   [TypeScript-aware React hooks for global state](https://blog.axlight.com/posts/typescript-aware-react-hooks-for-global-state/)\n*   [An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)](https://blog.axlight.com/posts/an-alternative-to-react-redux-by-react-hooks-api-for-both-javascript-and-typescript/)\n*   [Redux middleware compatible React Hooks library for easy global state management](https://blog.axlight.com/posts/redux-middleware-compatible-react-hooks-library-for-easy-global-state-management/)\n*   [React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state](https://blog.axlight.com/posts/react-hooks-tutorial-for-pure-usereducer-usecontext-for-global-state-like-redux-and-comparison/)\n*   [Four patterns for global state with React hooks: Context or Redux](https://blog.axlight.com/posts/four-patterns-for-global-state-with-react-hooks-context-or-redux/)\n*   [Steps to Develop Global State for React With Hooks Without Context](https://blog.axlight.com/posts/steps-to-develop-global-state-for-react/)\n\n## Community Wiki\n\n*   [Persistence](https://github.com/dai-shi/react-hooks-global-state/wiki/Persistence)\n*   [Optional initialState](https://github.com/dai-shi/react-hooks-global-state/wiki/Optional-initialState)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdai-shi%2Freact-hooks-global-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdai-shi%2Freact-hooks-global-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdai-shi%2Freact-hooks-global-state/lists"}