{"id":16471869,"url":"https://github.com/abranhe/reactjs-context","last_synced_at":"2026-01-03T18:30:53.866Z","repository":{"id":44592138,"uuid":"230981242","full_name":"abranhe/reactjs-context","owner":"abranhe","description":"The fastest way to start working with React Context API","archived":false,"fork":false,"pushed_at":"2024-09-03T20:56:25.000Z","size":12,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:27:49.299Z","etag":null,"topics":["helper","react","react-context","react-context-api","reducer"],"latest_commit_sha":null,"homepage":"https://p.abranhe.com/reactjs-context","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/abranhe.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/funding.yml","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},"funding":{"patreon":"abranhe","open_collective":"abranhe","custom":"https://cash.me/$abranhe"}},"created_at":"2019-12-30T21:19:02.000Z","updated_at":"2022-07-11T18:55:28.000Z","dependencies_parsed_at":"2024-10-28T16:07:58.955Z","dependency_job_id":null,"html_url":"https://github.com/abranhe/reactjs-context","commit_stats":null,"previous_names":["abranhe/reactjs-context","abrahamhba/reactjs-context"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abranhe%2Freactjs-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abranhe%2Freactjs-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abranhe%2Freactjs-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abranhe%2Freactjs-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abranhe","download_url":"https://codeload.github.com/abranhe/reactjs-context/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245097158,"owners_count":20560311,"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":["helper","react","react-context","react-context-api","reducer"],"created_at":"2024-10-11T12:15:03.782Z","updated_at":"2026-01-03T18:30:53.809Z","avatar_url":"https://github.com/abranhe.png","language":"JavaScript","readme":"\n[\u003cimg src=\"https://cdn.abranhe.com/projects/reactjs-context/logo.png\" width=\"100\"\u003e](https://p.abranhe.com/reactjs-context)\n\n# reactjs-context \n\n[![gh](https://github.com/abranhe/reactjs-context/workflows/build/badge.svg)](https://github.com/abranhe/reactjs-context/actions) [![travis](https://img.shields.io/travis/abranhe/reactjs-context?logo=travis)](https://travis-ci.org/abranhe/reactjs-context) [![license](https://img.shields.io/github/license/abranhe/reactjs-context.svg)](https://github.com/abranhe/reactjs-context/blob/master/license) [![npm](https://img.shields.io/npm/v/reactjs-context.svg?logo=npm)](https://github.com/abranhe/reactjs-context)\n\nReactjs-Context (`reactjs-context`) is a simple library made to easily work with [React Context API](https://reactjs.org/docs/context.html); but why to use React Context API if [Redux](https://redux.js.org) exists?\n\nWell,\n\n[\u003cimg src=\"https://cdn.abranhe.com/projects/reactjs-context/tweet.png\" width=\"400\"\u003e](https://twitter.com/dan_abramov/status/1097866569701621763)\n\nIn other words: *removing react-redux from our apps*.\n\nIn smalls projects I saw myself repeating the same code over-and-over again so I decided to make it a little bit more reusable.\n\n## Content \n\n- [Install](#install)\n- [Usage](#usage)\n- [Questions](#questions)\n- [License](#license)\n- [Demo](https://reactjs-context.demos.abranhe.com)\n- [Demo source code](https://github.com/abranhe/public-demos/tree/master/reactjs-context)\n\n## Install\n\n```\n$ npm install reactjs-context\n```\n\n\u003cdetails open\u003e\n\u003csummary\u003e\n  Other options?\n\u003c/summary\u003e\n\n###### npm\n\n```\n$ npm install reactjs-context\n```\n\n###### yarn\n\n```\n$ yarn add reactjs-context\n```\n\n###### Github Registry\n\n```\n$ npm install abranhe@reactjs-context\n```\n\n\u003c/details\u003e\n\n## Usage\n\n```js\nimport React from 'react';\nimport { Provider, Consumer } from 'reactjs-context';\n\nconst initialState = { counter: 0 };\n\nconst actions = (dispatch) =\u003e ({\n  increment: () =\u003e dispatch({ type: 'increment' }),\n  decrement: () =\u003e dispatch({ type: 'decrement' }),\n});\n\nconst reducer = (state, action) =\u003e {\n  switch (action.type) {\n    case 'increment':\n      return { counter: state.counter + 1 };\n    case 'decrement':\n      return { counter: state.counter - 1 };\n  }\n};\n\nexport default () =\u003e (\n  \u003cProvider initialState={initialState} reducer={reducer}\u003e\n    \u003cConsumer\u003e\n      {({ state, dispatch }) =\u003e {\n        const { increment, decrement } = actions(dispatch);\n        return (\n          \u003cdiv\u003e\n            \u003ch1\u003e{state.counter}\u003c/h1\u003e\n            \u003cdiv\u003e\n              \u003cbutton onClick={() =\u003e decrement()}\u003e-\u003c/button\u003e\n              \u003cbutton onClick={() =\u003e increment()}\u003e+\u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        );\n      }}\n    \u003c/Consumer\u003e\n  \u003c/Provider\u003e\n);\n```\n\nOtherwise you can use `connect()` to access the global state via props.\n\n```js\nimport { Provider } from 'reactjs-context';\nimport Counter from './counter';\n\nexport default () =\u003e (\n  \u003cProvider initialState={initialState} reducer={reducer}\u003e\n    \u003cCounter/\u003e\n  \u003c/Provider\u003e\n);\n```\n\nInside `counter.js`\n\n```js\nimport { connect } from 'reactjs-context';\n\nexport default connect(({ context: {state, dispatch} }) =\u003e {\n  const { increment, decrement } = actions(dispatch);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{state.counter}\u003c/h1\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e decrement()}\u003e-\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e increment()}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n});\n```\n\nThis is a simple demo demostrating the usage of `reactjs-context` with a countere demo.\n\n[\u003cimg src=\"https://cdn.abranhe.com/projects/reactjs-context/demo.png\" width=\"500\"\u003e](https://reactjs-context.demos.abranhe.com)\n\n## Questions?\n\nYou can ask your question on [Stackoverflow](https://stackoverflow.com) open a new issue, or DM me on Twitter [@abranhe](https://twitter.com/abranhe).\n\n## New features?\n\nI will try to implement `newReducer()` or `newAction()` that instead of creating that ouside of the package, just add a new action and the action lives on a global object inside of the package. It will also have default actions: like `reset()`. Please don't laugh, this is just me writing down ideas to come back later.\n\nIdea example: \n\n```js\nimport { newAction } from 'reactjs-context';\n\nnewAction({ \n  increment: () =\u003e {\n    return dispatch({ type: 'increment' });\n  },\n});\n```\n\n## License\n\nMIT © [Carlos Abraham](https://github.com/abranhe). React logo belongs to Facebook Inc.","funding_links":["https://patreon.com/abranhe","https://opencollective.com/abranhe","https://cash.me/$abranhe"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabranhe%2Freactjs-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabranhe%2Freactjs-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabranhe%2Freactjs-context/lists"}