{"id":27243339,"url":"https://github.com/spyna/react-context-hook","last_synced_at":"2025-07-11T05:35:03.742Z","repository":{"id":35195250,"uuid":"216848650","full_name":"Spyna/react-context-hook","owner":"Spyna","description":"A React.js global state manager with Hooks","archived":false,"fork":false,"pushed_at":"2023-10-11T05:28:28.000Z","size":6956,"stargazers_count":69,"open_issues_count":16,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:05:50.775Z","etag":null,"topics":["context-api","hooks","react","state-machine","state-management"],"latest_commit_sha":null,"homepage":"https://spyna.github.io/react-context-hook/","language":"JavaScript","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/Spyna.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2019-10-22T15:33:16.000Z","updated_at":"2023-05-24T04:23:56.000Z","dependencies_parsed_at":"2024-06-18T19:51:23.445Z","dependency_job_id":"88cd1a60-f7e2-457f-ac45-f5ca9682aadc","html_url":"https://github.com/Spyna/react-context-hook","commit_stats":{"total_commits":134,"total_committers":8,"mean_commits":16.75,"dds":0.582089552238806,"last_synced_commit":"b7cc1aa9cb50d8605d4e7b1b1b2f0ffcaf7f7fb3"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spyna%2Freact-context-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spyna%2Freact-context-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spyna%2Freact-context-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spyna%2Freact-context-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Spyna","download_url":"https://codeload.github.com/Spyna/react-context-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248290018,"owners_count":21078923,"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":["context-api","hooks","react","state-machine","state-management"],"created_at":"2025-04-10T20:27:58.872Z","updated_at":"2025-04-10T20:27:59.480Z","avatar_url":"https://github.com/Spyna.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-context-hook\n\n\u003e A React global state manager with Hooks\n\n[![NPM](https://img.shields.io/npm/v/react-context-hook.svg)](https://www.npmjs.com/package/react-context-hook) \n[![Bundlephobia](https://badgen.net/bundlephobia/minzip/react-context-hook)](https://bundlephobia.com/result?p=react-context-hook)\n\n## Install\n\n```bash\nnpm install --save react-context-hook\n```\n\n## Documentation\n\nRead the documentation of `react-context-hook`: \n\n* [Documentation in HTML format](https://spyna.github.io/react-context-hook/docs/)\n\n* [Documentation in Github MarkDown](./DOCS.md)\n\n## Usage\n\nFirst, wrap your React App in the *Store Provider* using the function `withStore`. \n\n```JS\nimport { withStore} from 'react-context-hook'\n\nexport default withStore(App)\n```\n\nNext use the hook in your Components\n\n```JS\nimport { useStore } from 'react-context-hook'\n\n// const [count, setCount, deleteCount] = useStore('count', 0)\n\nexport default function () {\n  const [count, setCount, deleteCount] = useStore('count', 0)\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e setCount(count - 1)}\u003eDecrement - \u003c/button\u003e\n      \u003cspan className=\"count\"\u003e{count}\u003c/span\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrement + \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e deleteCount()}\u003eDelete \"count\" from store\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### More hooks: \n\n\n * withStore - [docs](./DOCS.md#withStore)\n * useStore - [docs](./DOCS.md#usestore)\n * useStoreState - [docs](./DOCS.md#usestorestate)\n * useSetStoreValue - [docs](./DOCS.md#usesetstorevalue)\n * useDeleteStoreValue - [docs](./DOCS.md#usedeletestorevalue)\n * GetAndSet - [docs](./DOCS.md#useGetAndSet)\n * GetAndDelete - [docs](./DOCS.md#usegetanddelete)\n * SetAndDelete - [docs](./DOCS.md#usesetanddelete)\n * StoreValue - [docs](./DOCS.md#usestorevalue)\n\n### Advanced use of withStore\n\n```JS\nimport { withStore } from 'react-context-hook'\n\nconst initialState = { count: 10 }\n\nconst storeConfig = {\n  listener: (state, key, prevValue, nextValue) =\u003e {\n      console.log(`the key \"${key}\" changed in the store`)\n      console.log('the old value is', prevValue)\n      console.log('the current value is', nextValue)\n      console.log('the state is', state)\n  },\n  logging: true //process.env.NODE_ENV !== 'production'\n}\n\nexport default withStore(App, initialState, storeConfig)\n```\n\n`withStore` creates a React *Context.Provider* which wrap your application the value of the Provider is the **store**. The **store** is similar to a [Javascript Map](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Map) where you can put, read, and delete values by their key. \n\nFor example `store.set('username',  {name: 'spyna', email: 'me@spyna.it'})` will set a `username` key in the store map. Then you can read, modify or delete it from the map using `store.get('username')` or `store.remove('username')`. \n\nThe store is exported as `store` from *react-context-hook*, so you can use it in the Components. \nHowever for convenience, in React Components you can use the hooks exported from *react-context-hook*. \n\n## Using store outside of React components\n\n`react-context-hook` exports a `store` object which can be used outside of React Components, but will affect the global state. This *object* has the following methods: \n\n* reset: a function to reset the store state to the specified value: Eg: `store.reset({initialValue: 0})`. \n* set: a function that sets the specified key in the store. This function is equivaluent to the `useSetStoreValue` hook.\n* delete: a function that deletes the specified key from the store. This function is equivaluent to the `useDeleteStoreValue` hook.\n* getState: a function that returns the global state value of the store\n\nwhen using these functions, the React Components will re-render. \n\n### Examples\n\n```JavaScript\nimport {store} from 'react-context-hook' //import the raw store\n\n\n//In any JavaScript file you can use:\n\nstore.set('user', {name: 'piero', email: 'nappiero@spyna.it'})\nstore.delete('user')\nstore.reset({user: null, loggedIn: false})\nconst theState = store.getState()\n\n```\n\n\nThis *store* is automatically initialized when you use the `withStore` function (`export default withStore(App)`). This means you can use it **only after** calling that function.\n\n## License\n\nMIT © [Spyna](https://github.com/Spyna)\n\n[![Analytics](https://ga-beacon.appspot.com/UA-89584671-2/github/react-context-hook)](https://github.com/igrigorik/ga-beacon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspyna%2Freact-context-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspyna%2Freact-context-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspyna%2Freact-context-hook/lists"}