{"id":28089095,"url":"https://github.com/edmond-xaviercollot/react-contextifier","last_synced_at":"2025-05-13T12:53:44.079Z","repository":{"id":44593516,"uuid":"139410814","full_name":"Edmond-XavierCollot/react-contextifier","owner":"Edmond-XavierCollot","description":"React Context Api made easy","archived":false,"fork":false,"pushed_at":"2019-01-12T16:16:37.000Z","size":123,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-21T14:19:06.924Z","etag":null,"topics":["javascript","react","react-context","reactjs","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Edmond-XavierCollot.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}},"created_at":"2018-07-02T08:04:13.000Z","updated_at":"2022-07-11T18:52:47.000Z","dependencies_parsed_at":"2022-08-26T23:40:55.152Z","dependency_job_id":null,"html_url":"https://github.com/Edmond-XavierCollot/react-contextifier","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edmond-XavierCollot%2Freact-contextifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edmond-XavierCollot%2Freact-contextifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edmond-XavierCollot%2Freact-contextifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edmond-XavierCollot%2Freact-contextifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Edmond-XavierCollot","download_url":"https://codeload.github.com/Edmond-XavierCollot/react-contextifier/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948141,"owners_count":21988952,"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":["javascript","react","react-context","reactjs","redux"],"created_at":"2025-05-13T12:53:43.267Z","updated_at":"2025-05-13T12:53:44.063Z","avatar_url":"https://github.com/Edmond-XavierCollot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-contextifier\n\nreact-contextifier is a wrapper of the react context api.\nIts main purpose is to reduce the verbosity and the frictions encountered when managing contexts\n\n## Installation\n\nUsing Yarn:\n\n```shell\nyarn install react-contextifier\n```\n\nUsing npm:\n\n```shell\nnpm install --save react-contextifier\n```\n\n## Exemples\n\n### Simple context\n\n```javascript\nimport { createContext, Provider, Consumer } from 'react-contextifier'\n\ncreateContext('user')\n\nconst User () =\u003e (\n  \u003cProvider context=\"user\" value={{ name: 'John' }}\u003e\n    \u003cProfile /\u003e\n  \u003c/Provider\u003e\n)\n\nconst Profile = () =\u003e (\n  \u003cConsumer context=\"user\"\u003e{({ name }) =\u003e \u003cdiv\u003e{name}\u003c/div\u003e}\u003c/Consumer\u003e\n)\n```\n\n### With HOC\n\n```javascript\nimport { subscribe } from 'react-contextifier';\n\nconst Profile = ({ name }) =\u003e \u003cdiv\u003e{name}\u003c/div\u003e;\n\nexport default subscribe({\n  user: ({ name }) =\u003e ({ name }),\n})(Profile);\n```\n\n### Multiple context\n\n**contexts.js**\n\n```javascript\nimport { createContext } from 'react-contextifier';\n\ncreateContext('user');\ncreateContext('todos');\n```\n\n**User.js**\n\n```javascript\nimport { Provider } from 'react-contextifier';\n\nconst User = () =\u003e (\n  \u003cProvider context=\"user\" value={{ name: 'John' }}\u003e\n    \u003cMissions /\u003e\n  \u003c/Provider\u003e\n);\n```\n\n**Missions.js**\n\n```javascript\nimport { Provider } from 'react-contextifier';\n\nconst Missions = () =\u003e (\n  \u003cProvider context=\"missions\" value={{ list: [] }}\u003e\n    \u003cMissions /\u003e\n  \u003c/Provider\u003e\n);\n```\n\n**Profile.js**\n\n```javascript\nimport { subscribe } from 'react-contextifier'\n\nconst Profile = ({ userName, missions }) =\u003e (...)\n\nconst mapContextsToProps = {\n  user: ({ name }) =\u003e ({ userName: name }),\n  missions: ({ list }) =\u003e ({ mission: list })\n}\n\nexport default subscribe(mapContextsToProps)(Profile)\n```\n\n### Custom Provider\n\n**MessageProvider.js**\n\n```javascript\nimport { createContext, registerProvider } from 'react-contextifier';\n\nconst { Provider } = createContext('hello');\n\nclass MessageProvider extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      message: 'hello',\n      updateMessage: this.updateMessage,\n    };\n  }\n\n  updateMessage = message =\u003e {\n    this.setState({ message });\n    return message;\n  };\n\n  render() {\n    const { children } = this.props;\n    return \u003cProvider value={this.state}\u003e{children}\u003c/Provider\u003e;\n  }\n}\n\nregisterCustomProvider('message', MessageProvider);\n```\n\n**App.js**\n\n```javascript\nimport { Provider } from 'react-contextifier';\n\nconst Message = ({ message, updateMessage }) =\u003e \u003cdiv\u003e{message}\u003c/div\u003e;\n\nconst App = () =\u003e (\n  \u003cProvider context=\"message\"\u003e\n    \u003cMessage /\u003e\n  \u003c/Provider\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedmond-xaviercollot%2Freact-contextifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedmond-xaviercollot%2Freact-contextifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedmond-xaviercollot%2Freact-contextifier/lists"}