{"id":20524262,"url":"https://github.com/aadilhasan/react-ctx-store","last_synced_at":"2026-04-13T04:02:31.004Z","repository":{"id":96214080,"uuid":"382600579","full_name":"aadilhasan/react-ctx-store","owner":"aadilhasan","description":"A React context wrapper, which makes context more performant, scalable, and easy to use.","archived":false,"fork":false,"pushed_at":"2021-07-08T10:28:56.000Z","size":309,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-16T22:18:35.011Z","etag":null,"topics":["context","context-store","react","react-context","react-context-store","react-native","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/aadilhasan.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-03T11:39:35.000Z","updated_at":"2021-07-08T10:28:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"9c872d59-429a-4ee8-9df0-3e952acfe7cb","html_url":"https://github.com/aadilhasan/react-ctx-store","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"e8203cd56f02f97c66277defba9d5417611901f2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-ctx-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-ctx-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-ctx-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aadilhasan%2Freact-ctx-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aadilhasan","download_url":"https://codeload.github.com/aadilhasan/react-ctx-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242128327,"owners_count":20076177,"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","context-store","react","react-context","react-context-store","react-native","state-management"],"created_at":"2024-11-15T22:48:46.952Z","updated_at":"2025-12-31T00:51:15.609Z","avatar_url":"https://github.com/aadilhasan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-ctx-store\n\n\u003e A React context wrapper, which makes context more performant, scalable and easy to use.\n\n## Why?\n\nReact context is good, but it is not good for medium to big projects, it has following problems:\n\n- re-rendering, context re-renders all the subscriber doesn't matter if the subscriber is using the updated property or not.\n- scalability, context has this re-rendering issue, one single store is not possible so multiple context are required.\n- there is not simple way to update the context, it requires a bit of extra code.\n\n[![NPM](https://img.shields.io/npm/v/react-ctx-store.svg)](https://www.npmjs.com/package/react-ctx-store) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save react-ctx-store\n```\n\n### Usage\n\n```tsx\nimport React, { Component } from 'react'\n\nimport { createContext } from 'react-ctx-store'\n\nconst store = {\n  count: 0,\n}\n\nconst updaters = {\n  updateCount: (store) =\u003e {\n    return {\n      count: store.count + 1;\n    }\n  }\n}\n\nconst {Consumer, Provider} = createContext(store, updaters)\n\nfunction CounterComponent ({count, updateCount}) {\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{count}\u003c/span\u003e\n      \u003cbutton onClick={updateCount}\u003eupdate count\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport function ExampleApp (){\n  return (\n      \u003cProvider\u003e\n        \u003cConsumer mapContextToProps={['count', 'updateCount']}\u003e\n          \u003cCounterComponent/\u003e\n        \u003c/Consumer\u003e\n      \u003c/Provider\u003e\n    )\n}\n```\n\n### API\n\n```tsx\nimport { creatContext } from 'react-ctx-store'\n\nconst store = {\n  count: 0,\n}\n\n// an object of where every key should be an string and value should be a function which will update the store\nconst updaters = {\n  updateCount: (store, ...rest) =\u003e {\n    return {\n      count: store.count + 1;\n    }\n  }\n}\n\nconst { Consumer, Provider, connect, useStore, _context } = createContext(\n  store,\n  updaters\n)\n```\n\n`react-ctx-store` exports one single method `createContext` which takes 2 arguments\n\n- Store - a javascript object.\n- Updaters - an object of functions, only these functions can update the store, every updater function receives store as the first argument, and rest of the argument can be passed by the caller function. To update the store updater function will have to return an updated store value.\n\n`createContext` method returns following Components and methods:\n\n#### 1. Provider\n\nA React component which allows consuming components to subscribe to a context changes, similar to React Context Provider.\n\nUsage:\n\n```tsx\nfunction Example() {\n  return (\n    /* children of the Provider will have access to store and updaters using Provider Component */\n    \u003cProvider\u003e\n      \u003cApp /\u003e\n    \u003c/Provider\u003e\n  )\n}\n```\n\n#### 2. Consumer\n\nA React Component that can subscribe to the values of the store/context.\nConsumer takes a single prop `mapContextToProps` which takes an array of properties or a callback function as value.\n\nUsage:\n\n```tsx\n/* all direct children of Consumer component will receive count as a prop */\n\u003cConsumer mapContextToProps={['count']}\u003e...\u003c/Consumer\u003e\n```\n\nor\n\n```tsx\n/* all direct children of Consumer component will receive totalCount as a prop */\n\u003cConsumer mapContextToProps={({count} =\u003e {totalCount: count * 10})}\u003e\n  ...\n\u003c/Consumer\u003e\n```\n\n#### 3. Connect\n\nA method which lets you subscribe to the values of the store/context.\n\nUsage:\n\n```tsx\n/* Component will receive count as a prop*/\nconst App = connect(['count'])(Component)\n```\n\nor\n\n```tsx\n/* Component will receive count as a prop*/\nconst App = connect((store) =\u003e {count: store.count, update: store.updateCount})(Component)\n```\n\n#### 3. useStore\n\nA hook, which returns store and updaters.\n\nNote: the component using useStore hook will re-render if any value changes in the store.\n\n```tsx\nfunction WithHooks() {\n  const { count, updateCount } = useStore()\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{count}\u003c/span\u003e\n      \u003cbutton onClick={updateCount}\u003eUpdate Count\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### 4. \\_context\n\nA React Context object which is internally being used to store the values, it is exposted in case a user wants to have access to original Context.\n\n### Examples\n\n#### Async operation in updaters\n\n```tsx\nimport { createContext } from 'react-ctx-store'\n\nconst store = {\n  userData: null\n}\n\nconst updaters = {\n  fetchUserData: async (store, userId) =\u003e {\n    const userData = await fetch('.../user/' + userId)\n    return { userData }\n  }\n}\n\nconst { Consumer, Provider } = createContext(store, updaters)\n\nfunction UserProfile({ userData, fetchUserData }) {\n  useEffect(() =\u003e {\n    fetchUserData('123')\n  }, [])\n  return \u003cdiv\u003eUserName: {userData.name}\u003c/div\u003e\n}\n\nexport function App() {\n  return (\n    \u003cProvider\u003e\n      \u003cConsumer mapContextToProps={['userData', 'fetchUserData']}\u003e\n        \u003cUserProfile /\u003e\n      \u003c/Consumer\u003e\n    \u003c/Provider\u003e\n  )\n}\n```\n\n## License\n\nMIT © [aadilhasan](https://github.com/aadilhasan)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faadilhasan%2Freact-ctx-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faadilhasan%2Freact-ctx-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faadilhasan%2Freact-ctx-store/lists"}