{"id":13563271,"url":"https://github.com/drcmda/react-contextual","last_synced_at":"2025-04-12T19:48:17.544Z","repository":{"id":66236945,"uuid":"119603782","full_name":"drcmda/react-contextual","owner":"drcmda","description":"🚀 react-contextual is a small (less than 1KB) helper around React 16s new context api","archived":false,"fork":false,"pushed_at":"2018-09-12T18:11:23.000Z","size":3963,"stargazers_count":640,"open_issues_count":13,"forks_count":22,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-12T19:48:14.274Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/drcmda.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2018-01-30T22:41:23.000Z","updated_at":"2025-03-23T20:54:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"356d9eaa-5591-4624-a5e7-d0210d4738bd","html_url":"https://github.com/drcmda/react-contextual","commit_stats":{"total_commits":369,"total_committers":8,"mean_commits":46.125,"dds":0.02981029810298108,"last_synced_commit":"2f4bec2f5fc3bd58bc044f1739b73f7b63407b86"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-contextual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-contextual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-contextual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcmda%2Freact-contextual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drcmda","download_url":"https://codeload.github.com/drcmda/react-contextual/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625498,"owners_count":21135513,"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":[],"created_at":"2024-08-01T13:01:17.089Z","updated_at":"2025-04-12T19:48:17.522Z","avatar_url":"https://github.com/drcmda.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/drcmda/react-contextual.svg?branch=master)](https://travis-ci.org/drcmda/react-contextual) [![codecov](https://codecov.io/gh/drcmda/react-contextual/branch/master/graph/badge.svg)](https://codecov.io/gh/drcmda/react-contextual) [![npm version](https://badge.fury.io/js/react-contextual.svg)](https://badge.fury.io/js/react-contextual)\n\n    npm install react-contextual\n\n# Why 🤔\n\n* consume and create [context](https://reactjs.org/blog/2018/03/29/react-v-16-3.html#official-context-api) with ease, every kind of context, no matter which or whose or how many providers\n* a cooked down redux-like store pattern with setState semantics and central actions\n\nClick [this link](https://github.com/drcmda/react-contextual/blob/master/PITFALLS.md) for a detailed explanation.\n\n# If you just need a light-weight no-frills store 🎰\n\n\u003cb\u003eExamples\u003c/b\u003e: [Counter](https://codesandbox.io/embed/3vo9164z25) | [Global setState](https://codesandbox.io/embed/01l8z634qn) | [Async actions](https://codesandbox.io/embed/lxly45lvkl) | [Memoization/Reselect](https://codesandbox.io/embed/yvx9my007z) | [Multiple stores](https://codesandbox.io/embed/0o8pj1jz7v) | [External store](https://codesandbox.io/embed/jzwv46729y)\n\nPass a `store` (which stores some state and actions to update the state) to [Provider](https://github.com/drcmda/react-contextual/blob/master/API.md#provider). Then receive the props in the store either by using a [HOC](https://github.com/drcmda/react-contextual/blob/master/API.md#subscribe) or [render-props](https://github.com/drcmda/react-contextual/blob/master/API.md#subscribe-as-a-component).\n\n#### Render props\n\n```jsx\nimport { Provider, Subscribe } from 'react-contextual'\n\nconst store = {\n  count: 0,\n  up: () =\u003e state =\u003e ({ count: state.count + 1 }),\n  down: () =\u003e state =\u003e ({ count: state.count - 1 }),\n}\n\nconst App = () =\u003e (\n  \u003cProvider {...store}\u003e\n    \u003cSubscribe\u003e\n      {props =\u003e (\n        \u003cdiv\u003e\n          \u003ch1\u003e{props.count}\u003c/h1\u003e\n          \u003cbutton onClick={props.up}\u003eUp\u003c/button\u003e\n          \u003cbutton onClick={props.down}\u003eDown\u003c/button\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/Subscribe\u003e\n  \u003c/Provider\u003e\n)\n```\n\n#### Higher Order Component\n\n```jsx\nimport { Provider, subscribe } from 'react-contextual'\n\nconst View = subscribe()(props =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003e{props.count}\u003c/h1\u003e\n    \u003cbutton onClick={props.up}\u003eUp\u003c/button\u003e\n    \u003cbutton onClick={props.down}\u003eDown\u003c/button\u003e\n  \u003c/div\u003e\n))\n\nconst App = () =\u003e (\n  \u003cProvider {...store}\u003e\n    \u003cView /\u003e\n  \u003c/Provider\u003e\n)\n```\n\n#### With decorator\n\n```jsx\n@subscribe()\nclass View extends React.PureComponent {\n  // ...\n}\n```\n\n#### Default store vs External store\n\nIf you declare your store like above it becomes the default internal context, and is available by default to all subscribers. There is no need to explicitely refer to it when you subscribe to it.\n\nWhen you need your store to be \"external\" so that you can refer to it and/or change its props from anywhere, you can declare it via [createStore](https://github.com/drcmda/react-contextual/blob/master/API.md#createstore). This also comes in handy when you need multiple stores.\n\nThere are a few key differences:\n\n* the store must be passed to its provider with the `store` property\n* it must be referred to either as first argument in `subscribe` or the `to` prop in `Subscribe`\n\n```jsx\nimport { Provider, createStore, subscribe } from 'react-contextual'\n\nconst externalStore = createStore({\n  text: 'Hello',\n  setText: text =\u003e ({ text }),\n})\n\nconst App = () =\u003e (\n  \u003cProvider store={externalStore}\u003e\n    \u003cSubscribe to={externalStore}\u003e{props =\u003e \u003cdiv\u003e{props.text}\u003c/div\u003e}\u003c/Subscribe\u003e\n  \u003c/Provider\u003e\n)\n```\n\n#### Global setState\n\nIf you do not supply any functions in the object passed to [createStore](https://github.com/drcmda/react-contextual/blob/master/API.md#createstore), a `setState` function would be added automatically for you. This applies to both `createStore` and the `Provider` above.\n\n```jsx\nconst store = createStore({ count: 0 })\n\nconst Test = subscribe(store)(props =\u003e (\n  \u003cbutton onClick={() =\u003e props.setState(state =\u003e ({ count: state.count + 1 }))}\u003e\n    {props.count}\n  \u003c/button\u003e\n))\n```\n\n#### mapContextToProps\n\n[subscribe](https://github.com/drcmda/react-contextual/blob/master/API.md#subscribe) and [Subscribe](https://github.com/drcmda/react-contextual/blob/master/API.md#subscribe-as-a-component) (the component) work with any React context, even polyfills. They pick providers and select state. Extend wrapped components from `React.PureComponent` and they will only render when picked state has changed.\n\n```jsx\n// Subscribes to all contents of the provider\nsubscribe(context)\n// Picking a variable from the store, the component will only render when it changes ...\nsubscribe(context, store =\u003e ({ loggedIn: store.loggedIn }))\n// Picking a variable from the store using the components own props\nsubscribe(context, (store, props) =\u003e ({ user: store.users[props.id] }))\n// Making store context available under the 'store' prop\nsubscribe(context, 'store')\n// Selecting several providers\nsubscribe([Theme, Store], (theme, store) =\u003e ({ theme, store }))\n// Selecting several providers using the components own props\nsubscribe([Theme, Store], (theme, store, props) =\u003e ({\n  store,\n  theme: theme.colors[props.id],\n}))\n// Making two providers available under the props 'theme' and 'store'\nsubscribe([Theme, Store], ['theme', 'store'])\n```\n\n# If you like to provide context 🚀\n\n\u003cb\u003eExamples\u003c/b\u003e: [Global context](https://codesandbox.io/embed/v8pn13nq77) | [Transforms](https://codesandbox.io/embed/mjv84k1kn9) | [Unique context](https://codesandbox.io/embed/ox405qqopy) | [Generic React Context](https://codesandbox.io/embed/55wp11lv4)\n\nContextual isn't limited to reading context and store patterns, it also helps you to create and share providers.\n\n* [moduleContext](https://github.com/drcmda/react-contextual/blob/master/API.md#modulecontext) creates a global provider and injects it into a component\n* [namedContext](https://github.com/drcmda/react-contextual/blob/master/API.md#namedcontext) creates a unique provider bound to a components lifecycle\n* [transformContext](https://github.com/drcmda/react-contextual/blob/master/API.md#transformcontext) transforms existing providers (like a declarative middleware)\n* [helper functions](https://github.com/drcmda/react-contextual/blob/master/API.md#imperative-context-handling) allow you to control a context by yourself\n\n#### Custom providers \u0026 transforms\n\n```jsx\nimport { subscribe, moduleContext, transformContext } from 'react-contextual'\n\nconst Theme = moduleContext()(({ context, color, children }) =\u003e (\n  \u003ccontext.Provider value={{ color }} children={children} /\u003e\n))\n\nconst Invert = transformContext(Theme)(({ context, color, children }) =\u003e (\n  \u003ccontext.Provider value={invert(color)} children={children} /\u003e\n))\n\nconst Write = subscribe(Theme)(({ color, text }) =\u003e (\n  \u003cspan style={{ color }}\u003e{text}\u003c/span\u003e\n))\n\nconst App = () =\u003e (\n  \u003cTheme color=\"red\"\u003e\n    \u003cWrite text=\"hello\" /\u003e\n    \u003cInvert\u003e\n      \u003cWrite text=\"world\" /\u003e\n    \u003c/Invert\u003e\n  \u003c/Theme\u003e\n)\n```\n\n#### With decorator\n\n```jsx\n@moduleContext()\nclass Theme extends React.PureComponent {\n  // ...\n}\n\n@transformContext(Theme)\nclass Invert extends React.PureComponent {\n  // ...\n}\n\n@subscribe(Theme)\nclass Say extends React.PureComponent {\n  // ...\n}\n```\n\n---\n\n[API](https://github.com/drcmda/react-contextual/blob/master/API.md) | [Changelog](https://github.com/drcmda/react-contextual/blob/master/CHANGELOG.md) | [Pitfalls using context raw](https://github.com/drcmda/react-contextual/blob/master/PITFALLS.md)\n","funding_links":[],"categories":["Libraries","List","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrcmda%2Freact-contextual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrcmda%2Freact-contextual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrcmda%2Freact-contextual/lists"}