{"id":15387220,"url":"https://github.com/wildhoney/reactstoreprovider","last_synced_at":"2026-01-06T19:07:45.076Z","repository":{"id":47398490,"uuid":"199057628","full_name":"Wildhoney/ReactStoreProvider","owner":"Wildhoney","description":"Another way to manage global state in any given component tree using providers and hooks. ","archived":false,"fork":false,"pushed_at":"2023-01-04T05:27:33.000Z","size":2312,"stargazers_count":0,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:23:17.725Z","etag":null,"topics":["react-hooks","react-state","react-state-management","state-management"],"latest_commit_sha":null,"homepage":"https://react-store-provider.herokuapp.com/","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/Wildhoney.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-26T17:42:50.000Z","updated_at":"2019-07-27T22:00:47.000Z","dependencies_parsed_at":"2023-02-01T23:15:47.276Z","dependency_job_id":null,"html_url":"https://github.com/Wildhoney/ReactStoreProvider","commit_stats":null,"previous_names":["wildhoney/reactstateprovider"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactStoreProvider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactStoreProvider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactStoreProvider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactStoreProvider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wildhoney","download_url":"https://codeload.github.com/Wildhoney/ReactStoreProvider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245938228,"owners_count":20697008,"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":["react-hooks","react-state","react-state-management","state-management"],"created_at":"2024-10-01T14:52:44.538Z","updated_at":"2026-01-06T19:07:45.026Z","avatar_url":"https://github.com/Wildhoney.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Store Provider\n\n\u003e Another way to manage global state in any given component tree using providers and hooks. \n\n![Travis](http://img.shields.io/travis/Wildhoney/ReactStoreProvider.svg?style=flat-square)\n\u0026nbsp;\n![Coveralls](https://img.shields.io/coveralls/Wildhoney/ReactStoreProvider.svg?style=flat-square)\n\u0026nbsp;\n![npm](http://img.shields.io/npm/v/react-store-provider.svg?style=flat-square)\n\u0026nbsp;\n![License MIT](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat-square)\n\n* **npm**: `npm react-store-provider`\n* **yarn**: `yarn add react-store-provider`\n\u003c!-- * **Heroku**: [http://react-store-provider.herokuapp.com/](http://react-store-provider.herokuapp.com/) --\u003e\n\n## Getting Started\n\nYou must setup your store exporting `initialState`, `actions`, `reducer` \u0026ndash; `initialState` is the initial state of the store and should be a standard object, `reducer` is a standard Redux-esque reducer function for manipulating the state, and the `actions` can either be a standard object or a function that binds the `dispatch`.\n\n```javascript\nexport const initialState = { label: 'foo' };\n\nconst actionTypes = {\n    update: Symbol('update')\n}\n\nexport const actions = dispatch =\u003e ({\n    update: payload =\u003e dispatch({ type: actionTypes.update, payload }),\n});\n\nexport function reducer(state, action) {\n    switch (action.type) {\n        case actionTypes.update:\n            return { ...state, label: action.payload };\n        default:\n            return state;\n    }\n}\n```\n\nOnce your store is all setup use `Store` to initialise it and then `getStore` to get a reference to the hook. You must have the `StoreProvider` in your tree before using the `useStore` hook.\n\n```javascript\nimport { Store } from 'react-store-provider';\nimport * as store from './foobar-store';\n\nexport default function Parent({ children }) {\n    return (\n        \u003cStore name=\"foobar\" store={store}\u003e\n            {children}\n        \u003c/Store\u003e\n    );\n}\n```\n\nAfter adding the `StoreProvider` to your tree, you can happily use the `useStore` in all child components. When you dispatch any actions from your child components and the state is updated, the state will be updated in all components that utilise the state from the provider.\n\n```javascript\nimport { useStore } from 'react-store-provider';\n\nexport default function Child() {\n    const [store, actions] = useStore('foobar');\n\n    return (\n        \u003cdiv onClick={() =\u003e actions.update('bar')}\u003e\n            {store.label}\n        \u003c/div\u003e\n    );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwildhoney%2Freactstoreprovider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwildhoney%2Freactstoreprovider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwildhoney%2Freactstoreprovider/lists"}