{"id":13802940,"url":"https://github.com/Contiamo/react-connect-context","last_synced_at":"2025-05-13T15:32:09.204Z","repository":{"id":44593760,"uuid":"122506757","full_name":"contiamo/react-connect-context","owner":"contiamo","description":"A simple tool to map context from React 16.3's new Context API to a component's props.","archived":true,"fork":false,"pushed_at":"2019-01-11T23:45:04.000Z","size":100,"stargazers_count":38,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-11T20:26:55.237Z","etag":null,"topics":["react","react-context"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/p9rv0rp59m","language":"TypeScript","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/contiamo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-22T16:47:08.000Z","updated_at":"2023-01-28T19:16:55.000Z","dependencies_parsed_at":"2022-09-03T18:41:05.165Z","dependency_job_id":null,"html_url":"https://github.com/contiamo/react-connect-context","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contiamo%2Freact-connect-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contiamo%2Freact-connect-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contiamo%2Freact-connect-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contiamo%2Freact-connect-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/contiamo","download_url":"https://codeload.github.com/contiamo/react-connect-context/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225239688,"owners_count":17442808,"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","react-context"],"created_at":"2024-08-04T01:00:18.433Z","updated_at":"2024-11-18T19:31:13.597Z","avatar_url":"https://github.com/contiamo.png","language":"TypeScript","readme":"# `react-connect-context`\n\n![Tiny](https://img.shields.io/badge/size-559%20B-brightgreen.svg?compression=gzip\u0026label=gzipped) [![Build Status](https://travis-ci.org/Contiamo/react-connect-context.svg?branch=master)](https://travis-ci.org/Contiamo/react-connect-context) [![Coverage Status](https://coveralls.io/repos/github/Contiamo/react-connect-context/badge.svg?branch=master)](https://coveralls.io/github/Contiamo/react-connect-context?branch=master)\n\nWith some of our internal applications at Contiamo, the [render-prop–style API of React 16.3's new Context API](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md) proves to be a bit limiting: [particularly the inability to use a consumed context value in component lifecycle hooks](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md#class-based-api). One solution to this is to pass an object _through context_, and then through props.\n\nInstead of repeatedly writing \"context containers\" that pass context objects to container components through props that _further_ pass state to presentational components through props, this tiny function allows us to give any component easy access to a created context through props, allowing for more idiomatic, predictable code.\n\nIf a component has a prop that collides with a context-passed-through prop, the component's prop has precedence. Simple.\n\n[Try it out!](https://codesandbox.io/s/p9rv0rp59m)\n\n## Getting Started\n\n1. `yarn add react-connect-context`\n1. At the top of your file, `import { connectContext } from \"react-connect-context\"`\n1. Wrap your component in the function as so: `connectContext(Context.Consumer)(MyComponent)`\n\n### Full Example\n\n[![Edit react-connect-context demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p9rv0rp59m)\n\n```jsx\nimport React from \"react\"\nimport { render } from \"react-dom\"\nimport { connectContext } from \"react-connect-context\"\n\n// CHANGE ME TO CHANGE THE CONTEXT FOR THE WHOLE APP!\nconst COLOR_PASSED_THROUGH_CONTEXT = \"red\"\n\ninterface ContextValue {\n    color: string;\n}\n\ninterface ContentProps {\n    myProp: string;\n    color: string;\n}\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv className=\"demo\"\u003e\n        \u003cHeader\u003eWelcome to my App!\u003c/Header\u003e\n        \u003cConnectedContent myProp=\"THIS IS MY PROP, HI!\" \u003e\n          Hello! I've written this component so that Magical Context-based text appears after children!\n        \u003c/ConnectedContent\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n// Presentational, nested components\nconst Header: React.SFC = ({ children }) =\u003e \u003ch1\u003e{children}\u003c/h1\u003e\nconst Content: React.SFC\u003cContentProps\u003e = ({ children, color, myProp }) =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003e{children}\u003c/p\u003e\n    \u003cdiv\u003e\n      I have looked into context and I've seen the color is:\n      \u003cspan style={{ color }}\u003e\n        \u003cstrong\u003e{color}\u003c/strong\u003e\n      \u003c/span\u003e! I also get my own props like \u003cstrong\u003e{myProp}\u003c/strong\u003e!\n    \u003c/div\u003e\n  \u003c/div\u003e\n)\n\n// Make a context.\nconst Context = React.createContext\u003cContextValue\u003e({ color: \"red\" })\n\n// Pass the consumer to our function.\nconst ConnectedContent = connectContext\u003cContextValue, ContentProps\u003e(Context.Consumer)(Content)\n\n// Render things, wrapping all in the provider.\nrender(\n  \u003cContext.Provider value={{ color: COLOR_PASSED_THROUGH_CONTEXT }}\u003e\n    \u003cApp /\u003e\n  \u003c/Context.Provider\u003e,\n  document.querySelector(\"#root\")\n)\n```\n\n## Frequently Asked Questions\n\n### Can I pick state and only re-render when necessary?\n\nSure. Consider using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) or [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) to let your components know when or when _not_ to update.\n\nAdditionally, unlike [Redux](https://github.com/reactjs/redux), React 16.3 allows the creation of _multiple_, composable `Context`s, so ideally, you'd be using a `Context` that is small enough to house _just the information_ that you'd like to reuse in order to properly [separate concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) and correctly use the [principle of least privilege](https://en.wikipedia.org/wiki/Principle_of_least_privilege) when passing context around.\n\n### Can I map my context object's properties to _different_ props on my component?\n\nFor now, _no_. This particular tool is designed to provide a nice cascade of props: if a component has a prop on it, like `color` from the above example, _that_ prop is used. If it doesn't have a prop, but the prop exists on a `Context`, _its_ prop is used.\n\nI would again toot the horn of using multiple small contexts here as above.\n\n## Gotchas\n\nThe Context value _has_ to be an object since it maps to props by key/value pairs. _Be careful_ if your context is just a string, as in the [basic example from React's RFC](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md#basic-example). This will throw an error that will lead you here. :)\n\n---\n\nMade with ❤️ at [Contiamo](https://contiamo.com) in Berlin.\n","funding_links":[],"categories":["Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FContiamo%2Freact-connect-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FContiamo%2Freact-connect-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FContiamo%2Freact-connect-context/lists"}