{"_id":"@hypnosphi/create-react-context","_rev":"411409","name":"@hypnosphi/create-react-context","description":"Polyfill for the proposed React context API","dist-tags":{"latest":"0.3.1"},"maintainers":[{"name":"hypnosphi","email":""}],"time":{"modified":"2021-08-04T05:09:44.000Z","created":"2021-01-11T19:02:36.411Z","0.3.1":"2021-01-11T19:02:36.411Z"},"users":{},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"repository":{"type":"git","url":"https://github.com/thejameskyle/create-react-context"},"versions":{"0.3.1":{"name":"@hypnosphi/create-react-context","publishConfig":{"access":"public"},"version":"0.3.1","description":"Polyfill for the proposed React context API","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"https://github.com/thejameskyle/create-react-context"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","keywords":["react","context","contextTypes","polyfill","ponyfill"],"scripts":{"test":"jest","flow":"flow","format":"prettier --write '**/*.{js,md,json,js.flow,d.ts}'","build":"babel src -d lib --copy-files --ignore __tests__","prepublish":"yarn build","commit":"lint-staged"},"dependencies":{"gud":"^1.0.0","warning":"^4.0.3"},"peerDependencies":{"prop-types":"^15.0.0","react":">=0.14.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.6.1","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","enzyme":"^3.2.0","enzyme-adapter-react-16":"^1.1.0","enzyme-to-json":"^3.2.2","flow-bin":"^0.60.1","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^6.0.0","prettier":"^1.9.1","prop-types":"^15.6.0","raf":"^3.4.0","react":"^16.2.0","react-dom":"^16.2.0"},"lint-staged":{"*.{js,md,json,js.flow,d.ts}":["prettier --write","git add"]},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"]},"licenseText":"Copyright (c) 2017-present James Kyle <me@thejameskyle.com>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@hypnosphi/create-react-context@0.3.1","dist":{"shasum":"f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6","size":4944,"noattachment":false,"key":"/@hypnosphi/create-react-context/-/@hypnosphi/create-react-context-0.3.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@hypnosphi/create-react-context/download/@hypnosphi/create-react-context-0.3.1.tgz"},"_npmUser":{"name":"hypnosphi","email":"talpa@yandex.ru"},"directories":{},"maintainers":[{"name":"hypnosphi","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/create-react-context_0.3.1_1610391756290_0.16407634917651892"},"_hasShrinkwrap":false,"publish_time":1610391756411,"_cnpm_publish_time":1610391756411}},"readme":"# create-react-context\n\n> Polyfill for the [proposed React context API](https://github.com/reactjs/rfcs/pull/2)\n\n## Install\n\n```sh\nyarn add create-react-context\n```\n\nYou'll need to also have `react` and `prop-types` installed.\n\n## API\n\n```js\nconst Context = createReactContext(defaultValue);\n// <Context.Provider value={providedValue}>{children}</Context.Provider>\n// ...\n// <Context.Consumer>{value => children}</Context.Consumer>\n```\n\n## Example\n\n```js\n// @flow\nimport React, { type Node } from 'react';\nimport createReactContext, { type Context } from 'create-react-context';\n\ntype Theme = 'light' | 'dark';\n// Pass a default theme to ensure type correctness\nconst ThemeContext: Context<Theme> = createReactContext('light');\n\nclass ThemeToggler extends React.Component<\n  { children: Node },\n  { theme: Theme }\n> {\n  state = { theme: 'light' };\n  render() {\n    return (\n      // Pass the current context value to the Provider's `value` prop.\n      // Changes are detected using strict comparison (Object.is)\n      <ThemeContext.Provider value={this.state.theme}>\n        <button\n          onClick={() => {\n            this.setState(state => ({\n              theme: state.theme === 'light' ? 'dark' : 'light'\n            }));\n          }}\n        >\n          Toggle theme\n        </button>\n        {this.props.children}\n      </ThemeContext.Provider>\n    );\n  }\n}\n\nclass Title extends React.Component<{ children: Node }> {\n  render() {\n    return (\n      // The Consumer uses a render prop API. Avoids conflicts in the\n      // props namespace.\n      <ThemeContext.Consumer>\n        {theme => (\n          <h1 style={{ color: theme === 'light' ? '#000' : '#fff' }}>\n            {this.props.children}\n          </h1>\n        )}\n      </ThemeContext.Consumer>\n    );\n  }\n}\n```\n\n## Compatibility\n\nThis package only \"ponyfills\" the `React.createContext` API, not other\nunrelated React 16+ APIs. If you are using a version of React <16, keep\nin mind that you can only use features available in that version.\n\nFor example, you cannot pass children types aren't valid pre React 16:\n\n```js\n<Context.Provider>\n  <div/>\n  <div/>\n</Context.Provider>\n```\n\nIt will throw `A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.` because `<Context.Provider>` can only receive a single child element. To fix the error just wrap everyting in a single `<div>`:\n\n```js\n<Context.Provider>\n  <div>\n    <div/>\n    <div/>\n  </div>\n</Context.Provider>\n```\n","_attachments":{},"license":"MIT"}