{"_id":"@abw/react-context-generator","_rev":"11-3dba4e9a3060c9a3631b1f3b918b37c6","name":"@abw/react-context-generator","dist-tags":{"latest":"2.0.1","beta":"2.0.0-beta.1"},"versions":{"1.0.0":{"name":"@abw/react-context-generator","version":"1.0.0","description":"Higher order component to easily create and use a React context","main":"lib/Generator.js","scripts":{"test":"jest","build":"webpack"},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@babel/core":"^7.1.6","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-jest":"^26.3.0","babel-loader":"^8.0.4","jest":"^26.4.2","path":"^0.12.7","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.13.1","webpack":"^4.5.0","webpack-cli":"^3.2.1"},"gitHead":"e701e555fee7880e9cf0c103f6b9f0f4c7859ff5","_id":"@abw/react-context-generator@1.0.0","_nodeVersion":"12.18.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-gcvZAnhQ3cOxll+oqTtbFsWH3B3m80ZJ01p2+QUTV8JmSJ2KruaP5edi7aYjaLG1dQ1J4b3u1bsEaqkyBa0agw==","shasum":"67e3a6003a5237c1143943db8fa7fad411adace0","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-1.0.0.tgz","fileCount":4,"unpackedSize":15614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfafzaCRA9TVsSAnZWagAAxKkP/RTXpVjK2z2h0FhszST7\nAAIsDNHWvrhRmsIHqWBe3Vukff3ci59kQlcnmDHzMiOS9EtomyParcftSUSr\nRRfRN+cAAz6UbaHpS6rv5rWJImFjCt9AZzbMAjG6HtMUiu2yD2Ij39POn1OT\n1hi6++UkPLVO1mAnduO+/8MNv3hqJ+zCZfqQz+FwgkfsVXgrNQuykCaT4ITR\nSRNle5aX8NXDOlnlLC7yewXbAYuvlPC+9DkvOP3azsPwGLIEm66t9Mvt5OTp\nTB8apLlC++QT8un9DL/spHz0EMjo03tRUvtf0EnmjDbhvFXMF6ioEZtht2Bu\nEW/NCjvktNsgrkOuNR9XDQyDEOpKFdys/0DdXYZ9nEaiIweXVLT6WGzqSZXR\nWUjCXWfFrJhVPfKJWxAJPjDgVhu0aNp6HPCokAUhUOs1u6DarNz0DLvL6dJn\nJIlD/wTdYdcyt86RoUKBdLcyVSU5OoSPZW7LrJKSzmYjQ9iUeiGyX3itJyGc\nDEEO8D9BBV3T4YnpgaSCxW3bEbb7qyeSEbVQJmYj5YkYJ7Q45W+1BMnF6RXy\n/Em4IaPS4SVjogZmEkXDzDtHQ5ghANWWMyWw7lSJY3Jyu33N7nEEzI7CKTY3\nkDBgWo0h8uCGNNjEw5J3dg1q5OmNWxLmtsykPiOPfLWcOWFJ65VlV0+THgRz\nKLOk\r\n=/CbY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8eQOSZ25VRx01gCgZAUDDF0oxhMzbY9Pp9yqdNZPAzQIhAKARJ0D3EUAuy4eboYNAI12wi3FwOwkNDlvxjfkcsE5u"}]},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_1.0.0_1600781529683_0.5020217216462892"},"_hasShrinkwrap":false},"1.1.0":{"name":"@abw/react-context-generator","version":"1.1.0","description":"Higher order component to easily create and use a React context","main":"lib/Generator.js","scripts":{"test":"jest","build":"webpack"},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0"},"devDependencies":{"@babel/core":"^7.1.6","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-jest":"^26.3.0","babel-loader":"^8.0.4","jest":"^26.4.2","path":"^0.12.7","react":"^17.0.0","react-dom":"^17.0.0","react-test-renderer":"^16.13.1","webpack":"^4.5.0","webpack-cli":"^3.2.1"},"dependencies":{},"gitHead":"a654e3389ec23efab6b69c3b4a5f87ec72ee4773","_id":"@abw/react-context-generator@1.1.0","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-aoyGDSFYUMENPu5DA0XHMnCxISVF0e5aRcBwBp/snMl3TlrBnfnkss6K7BIHjTPPQA9uQJ65YNfUEA/49oqmoQ==","shasum":"5f50b0dcd110208ad8f9494e156387fd703bb65b","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-1.1.0.tgz","fileCount":4,"unpackedSize":15399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuyQnCRA9TVsSAnZWagAApGIP/1GoK1ibxYSE51q57QRe\nNlOl4WMuNfW1+/ng2ZSwjytuxIl3LalmR7HB2NpWx38oI34dh9F9l3cJSshs\nU6i8A9Ufp/uSqeNXZaYyfpTfm2cxzen5HtlZf1ekM4WDWMr+Gnxa2yXlIGR4\n3DaoC0bsD/wd8lc9KCuc86g1FIFmq1I0Otzz9s0DA0V96OoMRybpWPva/Mor\n7GC5lu6JHEOI9G/+XWoEYlKdQpQFVouPNPxH+rqGRvj+8D7XOg5X+uYobZIV\nkpF65aJ25xisZhcciqOqU7L20iHturuZOY3kHgub3AIphC6+Ej4hABeSlGJO\neLcaSfdQvGhA5zg8g2PTBxexQmcGaBbT1V2fHvjHruQM7PmAT1Sac4mAWWJu\nIFo0xwUB9rNdcaDMeec1wrTzWY+NdZXxb2J3cOrrGcYrDtL6xv5E9/HYlR2e\nyc7ckYLyAQy8nMFiR+I+f3D5Jq9K4/fzSnNUo4+1ShduviLMEO3l5P1AElvM\n3x0tRjy6hH6ktMno44WRVyyzyaM082u/w+V9GWpO/Yc37L2KJahAJkKOW8H8\nbGITuYEv7De/eNqf9Gd3VZXYetTTLiBs8nrlNsD8CxVX26bTWlnr4IFm57Ht\nvwF6WOweQ8XiR1rcO8rRYvsMwMV11aG4bL1Pqe53zhTtdZt1y3KxWuHPgivV\n8BsX\r\n=g1Ba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2b2TGKzh8b1A4bxJyoWMvISJouFksZU3Sj1YVMruYxAiBcaIOQPD816xsq4EgkX9NMvbfpnZboyr4pCj862sO3OA=="}]},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_1.1.0_1633952762288_0.3402938693954807"},"_hasShrinkwrap":false},"1.1.1":{"name":"@abw/react-context-generator","version":"1.1.1","description":"Higher order component to easily create and use a React context","main":"lib/Generator.js","scripts":{"test":"jest","build":"webpack"},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.1.6","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-jest":"^26.3.0","babel-loader":"^8.0.4","jest":"^26.4.2","path":"^0.12.7","react":">=17.0.0","react-dom":">=17.0.0","react-test-renderer":"^16.13.1","webpack":"^4.5.0","webpack-cli":"^3.2.1"},"dependencies":{},"gitHead":"c32d7f403c974049b889e0f7fd03fe3c82550a8d","_id":"@abw/react-context-generator@1.1.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-3Nspj3R7dDJv08Hccqe9V6f1myb/nLJr24cqd9kkJ8/kqGmFD5XdKBv9Fg5rwJj/w6K8lwZL6c15YfnPXOe00w==","shasum":"cc369ffcbf2cb8de507568a90cb36db543d4b305","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-1.1.1.tgz","fileCount":4,"unpackedSize":14875,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE56jWOlXc9rzN0OwfIUIG9xn81RD0g7IzmiMH+75t1gAiAsURLZ74i89PpCzTgjf4TKDnI3U82ekVszVTG2QkTbaQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikHMmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG9A//cLykSFNGr1NDzROxNIMEe35/b0D8RGbhOsgxvzFBRJ3dOo96\r\nZDVzmY2seJmSm6WmgIV5KifLwjC4ZP0ZB0puzK+0RS9cMUk3gEfU1lCPFYLi\r\nbdABnsVA2XXYQIVw9K1DrZTfYrGfei//VVdX7ifo7WUGjBHxYCikYeyVqneD\r\ni3vXINAfyJLV1StGE21tSfWsuBRyGsCiZZDlZSpN9yX24dV5iqPhuSwmfiRo\r\nE5nn5MQI5ZNARhFkzlGp9BVznMCUeL0rp0WUkAMYqE05tNOg9KzHbRPulohL\r\nO9Ak+oCtDCC79iebBmt1R+juyP3qwMEgS0ZZnbhmRKCnfELKn8F9pgViGabV\r\nelI/cR1/2NwhMa3k+w3JlXaJhF7NDw+R2onlpg30m8pHWlwFrwHKPEfRKlKt\r\n2sNzuRcgfKaVj+nhg2DivYWob3/GZNHe6lNHDuSI0VH2stw6pq+j4GJ7GBxW\r\nF2r2t4/GxWK30iU2LkFFAxogMugusztHsCzuP0zY3VNnosrKqxmKO/GC+fkr\r\nVkCOszZ+CEo3+Tm/ybkNjY/twvS9+GofOZtFO4jIGov5q7TOq2Bn+mEJIrvF\r\n7dv521N5O3QeJQAxdHKL/YOnprMaBiswYorqqzcpDYnsKFRrmgdza1ImwpM1\r\nAe0tWw46O20M04ZbsVWQ+mN5ws9XZxnXefY=\r\n=fq3V\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_1.1.1_1653633829950_0.5354543576535908"},"_hasShrinkwrap":false},"1.1.2-beta.0":{"name":"@abw/react-context-generator","version":"1.1.2-beta.0","description":"Higher order component to easily create and use a React context","type":"module","main":"dist/Generator.js","module":"dist/Generator.esm.js","repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","babel-jest":"^26.6.3","babel-loader":"^8.3.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","path":"^0.12.7","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.19.1","rollup-plugin-peer-deps-external":"^2.2.4"},"scripts":{"test":"jest","build":"rollup -c"},"readme":"# react-context-generator\n\n## Introduction\nThis is a small and simple module that provides some syntactic sugar to\nstreamline the use of React Context to maintain state in your React\napplications.\n\nSeriously, it's *embarassingly* small.  We're talking 20 lines\nof code or so.\n\nIf you're not already familiar with React Context then you should start by\nreading the React Context documentation: https://reactjs.org/docs/context.html\n\n## Installation\n\nAdd `react-context-generator` to your project using either [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\n\n### Either:\n    $ npm install --save @abw/react-context-generator\n\n### Or:\n    $ yarn add @abw/react-context-generator\n\n## Wrapping a Component that Maintains State\n\nHere's a simple example of a component that maintains some state\nand provides methods for manipulating that state.\n\n```js\n// Counter.js\nimport React from \"react\";\nimport Generator from \"@abw/react-context-generator\";\n\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: this.props.initialCount || 0\n    };\n    this.actions = {\n      inc: this.increment.bind(this),\n      dec: this.decrement.bind(this),\n    };\n  }\n  increment() {\n    this.setState({ count: this.state.count + 1 });\n  }\n  decrement() {\n    this.setState({ count: this.state.count - 1 });\n  }\n  render() {\n    return this.props.render({\n      ...this.state,\n      ...this.actions,\n    });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nIt stores a `count` value in the state which is initially set to `0` or a custom value\nprovided by an `initialCount` property.  It has `increment()` and `decrement()` methods\nwhich respectively add or subtract one from the count.\n\nIn the `constructor()` method we also define `this.actions` to store versions of these\nmethods that are bound to `this`, allowing them to be called as functions from anywhere\nin our code.  I've given then shorter names here - `inc` and `dec` but that's entirely\narbitrary.  The original names would serve the purpose just as well.\n\nSo far this is all fairly standard Javascript/React code.  Where it gets interesting is in\nthe `render()` method.  All we do here is call the `render()` function that is passed\nin as a property - `this.props.render()` - and pass it an object containing the things\nthat we want to share with other components.\n\nIn this case we're passing everything in the state (which in this simple example only\ncontains `count`) and the actions that we've defined to manipulate the state (`inc` and `dec`).\n\nThe final line of code calls the `Generator()` function imported from\n`@abw/react-context-generator` passing the `Counter` component as an argument.\nThis is then the default value exported by the `Counter.js` module.\n\n```js\nexport default Generator(Counter);\n```\n\n## Using the Context Provider\n\nNow when we import this module we get an object that contains two entries: a `Provider` and a `Consumer`.\n\nThe `Provider` is designed to enclose any and all components that might need to access the state.\nIt's typically added somewhere near the \"outside\" of your application.\n\n```js\n// MyApp.js\nimport React from \"react\";\nimport Counter from \"./Counter\";\n\nexport default props => <div id=\"myapp\">\n  <h1>Welcome to My Counting App!</h1>\n  <Counter.Provider>\n    ...the rest of your app goes here...\n  </Counter.Provider>\n</div>\n```\n\nYou can pass custom properties to your `Provider` if you want to.  They will get passed down to\nthe `Counter` component, e.g.\n\n```js\nexport default props => <div id=\"myapp\">\n  <h1>Welcome to My Counting App that Starts at 100!</h1>\n  <Counter.Provider initialCount={100}>\n    ...the rest of your app goes here...\n  </Counter.Provider>\n</div>\n```\n\n## Using the Context Consumer\n\nWhen you need to access the state provided by `Counter` from somewhere deep inside your app you\nsimply need to wrap it in the `Counter.Consumer` function.  All of the items that the `Counter`\nmodule shares as context will be passed into your component as properties.\n\n```js\n// Controls.js\nimport React from \"react\";\nimport Counter from \"./Counter\";\n\nconst Controls = ({count, inc, dec}) => <div>\n  <p>The current count is {count}</p>\n  <button onClick={inc}>Increment</button>\n  <button onClick={dec}>Decrement</button>\n</div>\n\nexport default Counter.Consumer(Controls)\n```\n\nThat's all there is to it.  Sweet and simple!\n\n","readmeFilename":"README.md","_id":"@abw/react-context-generator@1.1.2-beta.0","_integrity":"sha512-lLuM7PEEgVeo0FkesKtap5ZF9ET3/N+FFVbPjVAfkGW9r3jnx6kpZdFMWOubeWohP+9ZEhHeUHYdVR7r7QVtog==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/32792fd09f64ece039e3b68ad0736f9d/abw-react-context-generator-1.1.2-beta.0.tgz","_from":"file:abw-react-context-generator-1.1.2-beta.0.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-lLuM7PEEgVeo0FkesKtap5ZF9ET3/N+FFVbPjVAfkGW9r3jnx6kpZdFMWOubeWohP+9ZEhHeUHYdVR7r7QVtog==","shasum":"e0cbd3d8a359705898505998e1dca8b86aead0b8","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-1.1.2-beta.0.tgz","fileCount":8,"unpackedSize":15123,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARnaGZ3ABSzZCeF5Kc0PaD45F6pqaRqYD0xYkr7wzJqAiEA7S15UGBLOn+CtI1Tbd6VlOSXcE0vXbq94VVS1ixOM/0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDMKmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9iA//XeDyTKaBXty25YpD0EyO5XjE3avwnOA4+fTOTKoqJEwk2lrq\r\nW/mSNfaKJb8XBkiHkk5MI73SPW7rGnAG05wZ7bKTsavRHqP9+SzGcjx76Soy\r\nCA+8aO+jQx03qthBOQs1OiX/ZDkLJuKFGK0Njm2iprUOB3vdXISP6iOjI8ou\r\n5FCAO0N22u8/rUBE3aq96IOAtdGfY1sHlEgtcSXeTX30RlcOz4Tg6Q1erGid\r\nHaiWQ93ap+Df9equPyfOqZ49QXzJ91zhyYbuv3dX5Um2cNcDpecNASCTsTRP\r\nP1Vm0q3DcrIAYFq4jQUglzDAsH13HjjTL59r/HzAadWz6fyGmCBo1LfE70qI\r\ngSd6bpWZ2LRBhTm2k3CSD1cHXQz0xocdXPzgYSHSbVXpqcLcVVYfkR2uBCDh\r\n/b+oWCyqP6w6AItw1LiM8VSwV5jBppzjQiNBIv11gBioe1222KniDdHy4zKT\r\nPs/yydvQsvilppSuF8Ymg+Sk6HRCFS6WokallBUiFP9DMQHjq4udl5Dp6y3k\r\nsWnIb1AL4LXOCiVJuF6qrXVt+HhsWKdpgpwq5ALxd461h355ecHdqlc46Vnu\r\nLcz7iyXx4ff36WZ9Nb/7YsoBsfp1OFnPOK79eMAomAAn8z3MK0aAEF7Namjb\r\n+cKz1O5LbtTR39cZE/8zj98+WX5aMZN43zU=\r\n=nq6A\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_1.1.2-beta.0_1678557862694_0.6529892730689681"},"_hasShrinkwrap":false},"1.1.2-beta.1":{"name":"@abw/react-context-generator","version":"1.1.2-beta.1","description":"Higher order component to easily create and use a React context","type":"module","main":"dist/react-context-generator.cjs","module":"dist/react-context-generator.mjs","exports":{".":{"require":"./dist/react-context-generator.cjs","import":"./dist/react-context-generator.mjs"}},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","babel-jest":"^26.6.3","babel-loader":"^8.3.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","path":"^0.12.7","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.19.1","rollup-plugin-peer-deps-external":"^2.2.4"},"scripts":{"test":"jest","build":"rollup -c"},"readme":"# react-context-generator\n\n## Introduction\nThis is a small and simple module that provides some syntactic sugar to\nstreamline the use of React Context to maintain state in your React\napplications.\n\nSeriously, it's *embarassingly* small.  We're talking 20 lines\nof code or so.\n\nIf you're not already familiar with React Context then you should start by\nreading the React Context documentation: https://reactjs.org/docs/context.html\n\n## Installation\n\nAdd `react-context-generator` to your project using either [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\n\n### Either:\n    $ npm install --save @abw/react-context-generator\n\n### Or:\n    $ yarn add @abw/react-context-generator\n\n## Wrapping a Component that Maintains State\n\nHere's a simple example of a component that maintains some state\nand provides methods for manipulating that state.\n\n```js\n// Counter.js\nimport React from \"react\";\nimport Generator from \"@abw/react-context-generator\";\n\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: this.props.initialCount || 0\n    };\n    this.actions = {\n      inc: this.increment.bind(this),\n      dec: this.decrement.bind(this),\n    };\n  }\n  increment() {\n    this.setState({ count: this.state.count + 1 });\n  }\n  decrement() {\n    this.setState({ count: this.state.count - 1 });\n  }\n  render() {\n    return this.props.render({\n      ...this.state,\n      ...this.actions,\n    });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nIt stores a `count` value in the state which is initially set to `0` or a custom value\nprovided by an `initialCount` property.  It has `increment()` and `decrement()` methods\nwhich respectively add or subtract one from the count.\n\nIn the `constructor()` method we also define `this.actions` to store versions of these\nmethods that are bound to `this`, allowing them to be called as functions from anywhere\nin our code.  I've given then shorter names here - `inc` and `dec` but that's entirely\narbitrary.  The original names would serve the purpose just as well.\n\nSo far this is all fairly standard Javascript/React code.  Where it gets interesting is in\nthe `render()` method.  All we do here is call the `render()` function that is passed\nin as a property - `this.props.render()` - and pass it an object containing the things\nthat we want to share with other components.\n\nIn this case we're passing everything in the state (which in this simple example only\ncontains `count`) and the actions that we've defined to manipulate the state (`inc` and `dec`).\n\nThe final line of code calls the `Generator()` function imported from\n`@abw/react-context-generator` passing the `Counter` component as an argument.\nThis is then the default value exported by the `Counter.js` module.\n\n```js\nexport default Generator(Counter);\n```\n\n## Using the Context Provider\n\nNow when we import this module we get an object that contains two entries: a `Provider` and a `Consumer`.\n\nThe `Provider` is designed to enclose any and all components that might need to access the state.\nIt's typically added somewhere near the \"outside\" of your application.\n\n```js\n// MyApp.js\nimport React from \"react\";\nimport Counter from \"./Counter\";\n\nexport default props => <div id=\"myapp\">\n  <h1>Welcome to My Counting App!</h1>\n  <Counter.Provider>\n    ...the rest of your app goes here...\n  </Counter.Provider>\n</div>\n```\n\nYou can pass custom properties to your `Provider` if you want to.  They will get passed down to\nthe `Counter` component, e.g.\n\n```js\nexport default props => <div id=\"myapp\">\n  <h1>Welcome to My Counting App that Starts at 100!</h1>\n  <Counter.Provider initialCount={100}>\n    ...the rest of your app goes here...\n  </Counter.Provider>\n</div>\n```\n\n## Using the Context Consumer\n\nWhen you need to access the state provided by `Counter` from somewhere deep inside your app you\nsimply need to wrap it in the `Counter.Consumer` function.  All of the items that the `Counter`\nmodule shares as context will be passed into your component as properties.\n\n```js\n// Controls.js\nimport React from \"react\";\nimport Counter from \"./Counter\";\n\nconst Controls = ({count, inc, dec}) => <div>\n  <p>The current count is {count}</p>\n  <button onClick={inc}>Increment</button>\n  <button onClick={dec}>Decrement</button>\n</div>\n\nexport default Counter.Consumer(Controls)\n```\n\nThat's all there is to it.  Sweet and simple!\n\n","readmeFilename":"README.md","_id":"@abw/react-context-generator@1.1.2-beta.1","_integrity":"sha512-74prIGyzH4wf6CM5Mql/WckSghjtxPTVzhzdz3rn3pgADcU5hO4cEZZSGEGldgzOp47HN5uH8hngE3ugV0kM4Q==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/89b69a7c740f6c739e07c38936996d84/abw-react-context-generator-1.1.2-beta.1.tgz","_from":"file:abw-react-context-generator-1.1.2-beta.1.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-74prIGyzH4wf6CM5Mql/WckSghjtxPTVzhzdz3rn3pgADcU5hO4cEZZSGEGldgzOp47HN5uH8hngE3ugV0kM4Q==","shasum":"f008fed9bfb6e39ba06174aeab3b34942cc9656d","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-1.1.2-beta.1.tgz","fileCount":12,"unpackedSize":22681,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwZMUuJrJcvQQCT5pcJKdlZsFPSV3NBYjsiwKiMg2J1wIhANzIsAYsFnAWitr5aPtjcq9r2K+9M1R08ZHERBmHflBv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDMUyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjXw/+MB0ZI53QebCDhgFWghNkDV5kSrIAnSDor/WlbXu/ChUlhKeq\r\nGMcJoOJg+ta5WQeb1CtrdzpSq6yboYwe9i1/hutA5wLP1OAO9nqL7opYzv41\r\nwSKfwEDbkCMmQBG+CL1lmPtuc7IICzS0sA7KfBF1jK6Paiorlw5OIQEy///6\r\nLt1L725fY9SD/grER0MJa2s6vc8cuTOfYguApzxz0gNBfJqOdpbDvm/6YsZQ\r\nLwtIYwFix5A7Eq39BgRUHecSxvzSSRO240LFBAmFe6R9ruJp8jpKf2IlWgNJ\r\nW0jL1SY79KaMY/kzLG0IpxyennrkWxCCNWyvzMj2yvtlsDHxb1idyAK0V7Q6\r\nvxGK1ViWaI1K9yFjroV6UQeWy+BFBvktREhDHUFadPBJ5VbYn5Lc8mGp7f1N\r\nZjZIS28lKt+N0ErcnojSz9J4ZtWLRRKERchE9Wq6vD4AQF/LB/GPaeErChRO\r\nyvYoyovBIgVQKAonOueEQKrPslgoKzqM5+UHuPZ17oivgJnc1JHT7HITfyKW\r\nA92bvUAF6yg45OT+FfxHiz8SwEIpLD0TeUQovxtylZkl8Av3eh2yhFxmNdfh\r\ngCmXZG8/osKk1EUQtWi+zmVD1LySLUoe0Tc0ptd+89xj4dsIzxQ+cL4kRTeD\r\nHNd/xXgpu2fYpH6B4AEzjNgrwmksacRRMuI=\r\n=sRO7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_1.1.2-beta.1_1678558514178_0.6343154588285309"},"_hasShrinkwrap":false},"1.2.0":{"name":"@abw/react-context-generator","version":"1.2.0","description":"Higher order component to easily create and use a React context","type":"module","main":"dist/react-context-generator.cjs","module":"dist/react-context-generator.mjs","exports":{".":{"require":"./dist/react-context-generator.cjs","import":"./dist/react-context-generator.mjs"}},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","babel-jest":"^26.6.3","babel-loader":"^8.3.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","path":"^0.12.7","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.19.1","rollup-plugin-peer-deps-external":"^2.2.4"},"scripts":{"test":"jest","build":"rollup -c"},"_id":"@abw/react-context-generator@1.2.0","_integrity":"sha512-ijbD6ev4b7Um1sc4xxQjNK8VNvqsVAl5lA+rth8EQ+6wvF+aYjQ4oWWUXa21V4+M5RTXcnhcfpKIq66b//tg+g==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/6e0792babe81bdb0632ebe4db0cffc19/abw-react-context-generator-1.2.0.tgz","_from":"file:abw-react-context-generator-1.2.0.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ijbD6ev4b7Um1sc4xxQjNK8VNvqsVAl5lA+rth8EQ+6wvF+aYjQ4oWWUXa21V4+M5RTXcnhcfpKIq66b//tg+g==","shasum":"cd6d501906937f673bbf900d712e390286456b2e","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-1.2.0.tgz","fileCount":8,"unpackedSize":15339,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1N9jj3/ohMaP7EkMOeSDEuwT/AYhmCxEFR0TxI43VogIgZGcx/VIHHSTTUmfv7SOTRYQrzb9F25DEg3+0J8tc8OI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDXxMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu/xAAggNf1pFhIrVQJ1Q31mCTL3wM8LpSlZAFh50BhUkvKoFU8X/b\r\nsHVU0eNAn2DQpMP1wckzFdGQYztQ/6iPMInUleBYYnAUUAOoMJHsRxhec+6K\r\nm9GoE4fp2/8d4GmL/VF+312ICZT6zsMnM4FGieCMrDwg/RxI8B/dbXofy/QR\r\nA12N2uoQQGo3+zh9pCS/w74WqZbzG2NTsaLBoacDmxs7YjevpvTw5CUuI9kU\r\nA6SA2ZPKHsgMNdeQF42/9j9uwpysqpbp5IaUpqmjQdAfMAiBHJBUCgygRPqM\r\n7XYgf8+KPnIj5EpQ6DmCi+Rk+l5342AKJJ3gtPHwYe9IrWXiGjWnTHKqz5Xn\r\nvoihMUccRGbmHciZKiokq3xpuyC29uiRmRfZPKZS3FGBR6+/GGgQq00/FVhE\r\n6vqWt8AK1Bmsy59bK22UweJdsjd4OPb3KQtHl47SaZm9/LVyg1v4i6Jf/XIW\r\n65sc/5/ORuE1hCcwal/3q6hOhjbOMZAWNJUen0xqEd+gw4nXxs0lwUGvYAKj\r\nWnQCJPOnkdaHPb4HbR3YB4kLntPHY6g0yZfkdunCh+26MuL3C4gYZ2a8b+Ow\r\nsJFQ3rw1vsmok56G2Y046joL/lMFl+Sg+k3KmdyreUxP942VAu1u6Om9FXAS\r\ntJE0YkKVRR52p3Lds2nWFIx3yUtDNAkGij4=\r\n=8/O8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_1.2.0_1678605388275_0.739519072059933"},"_hasShrinkwrap":false},"2.0.0-beta.0":{"name":"@abw/react-context-generator","version":"2.0.0-beta.0","description":"Higher order component to easily create and use a React context","type":"module","main":"dist/react-context-generator.cjs","module":"dist/react-context-generator.mjs","exports":{".":{"require":"./dist/react-context-generator.cjs","import":"./dist/react-context-generator.mjs"}},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","babel-jest":"^26.6.3","babel-loader":"^8.3.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","path":"^0.12.7","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.19.1","rollup-plugin-peer-deps-external":"^2.2.4"},"scripts":{"test":"jest","build":"rollup -c"},"readme":"# react-context-generator\n\n## Introduction\nThis is a small and simple module that provides some syntactic sugar to\nstreamline the use of React Context to maintain state in your React\napplications.\n\nSeriously, it's *embarassingly* small.  We're talking 20 lines\nof code or so for the main function.\n\nIf you're not already familiar with React Context then you should start by\nreading the React Context documentation: https://reactjs.org/docs/context.html\n\n## Version 2 - Breaking Changes\n\nFor version 1 you can import the `Generator` function as the default.\n\n```js\n// version 1.*.*\nimport Generator from '@abw/react-context-generator`\n```\n\nFor version 2 and above you must use named imports.\n\n```js\n// version 2.*.*\nimport { Generator } from '@abw/react-context-generator`\n```\n\n## Installation\n\nAdd `react-context-generator` to your project using your favourite package\nmanager.\n\n### npm:\n    $ npm add @abw/react-context-generator\n\n### yarn:\n    $ yarn add @abw/react-context-generator\n\n### pnpm:\n    $ pnpm add @abw/react-context-generator\n\n## Wrapping a Component that Maintains State\n\nHere's a simple example of a component that maintains some state\nand provides methods for manipulating that state.\n\n```js\n// Counter.js\nimport React from \"react\";\nimport { Generator } from \"@abw/react-context-generator\";\n\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: this.props.initialCount || 0\n    };\n    this.actions = {\n      inc: this.increment.bind(this),\n      dec: this.decrement.bind(this),\n    };\n  }\n  increment() {\n    this.setState({ count: this.state.count + 1 });\n  }\n  decrement() {\n    this.setState({ count: this.state.count - 1 });\n  }\n  render() {\n    return this.props.render({\n      ...this.state,\n      ...this.actions,\n    });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nIt stores a `count` value in the state which is initially set to `0` or a custom value\nprovided by an `initialCount` property.  It has `increment()` and `decrement()` methods\nwhich respectively add or subtract one from the count.\n\nIn the `constructor()` method we also define `this.actions` to store versions of these\nmethods that are bound to `this`, allowing them to be called as functions from anywhere\nin our code.  I've given then shorter names here - `inc` and `dec` but that's entirely\narbitrary.  The original names would serve the purpose just as well.\n\nSo far this is all fairly standard Javascript/React code.  Where it gets interesting is in\nthe `render()` method.  All we do here is call the `render()` function that is passed\nin as a property - `this.props.render()` - and pass it an object containing the things\nthat we want to share with other components.\n\nIn this case we're passing everything in the state (which in this simple example only\ncontains `count`) and the actions that we've defined to manipulate the state (`inc` and `dec`).\n\nThe final line of code calls the `Generator()` function imported from\n`@abw/react-context-generator` passing the `Counter` component as an argument.\nThis is then the default value exported by the `Counter.js` module.\n\n```js\nexport default Generator(Counter);\n```\n\n## Using the Context Provider\n\nNow when we import this module we get an object that contains two entries: a `Provider` and a `Consumer`.\n\nThe `Provider` is designed to enclose any and all components that might need to access the state.\nIt's typically added somewhere near the \"outside\" of your application.\n\n```js\n// MyApp.jsx\nimport React from \"react\";\nimport Counter from \"./Counter.js\";\n\nconst MyApp = () =>\n  <div id=\"myapp\">\n    <h1>Welcome to My Counting App!</h1>\n    <Counter.Provider>\n      ...the rest of your app goes here...\n    </Counter.Provider>\n  </div>\n\nexport default MyApp\n```\n\nYou can pass custom properties to your `Provider` if you want to.  They will get passed down to\nthe `Counter` component, e.g.\n\n```js\n  <Counter.Provider initialCount={100}>\n    ...the rest of your app goes here...\n  </Counter.Provider>\n```\n\n## Using the Context Consumer\n\nWhen you need to access the state provided by `Counter` from somewhere deep inside your app you\nsimply need to wrap it in the `Counter.Consumer` function.  All of the items that the `Counter`\nmodule shares as context will be passed into your component as properties.\n\n```js\n// Controls.js\nimport React from \"react\";\nimport Counter from \"./Counter.js\";\n\nconst Controls = ({count, inc, dec}) => <div>\n  <p>The current count is {count}</p>\n  <button onClick={inc}>Increment</button>\n  <button onClick={dec}>Decrement</button>\n</div>\n\nexport default Counter.Consumer(Controls)\n```\n\nThat's all there is to it.  Sweet and simple!\n\n## Base Class Context\n\nThere's a base class context module that you can subclass.  It provides\na number of conveniences to help you reduce the amount of code you need\nto write.\n\n```js\nimport { Generator, Context } from \"@abw/react-context-generator\";\n\nclass Counter extends Context {\n  static initialState = {\n    count: 10,\n  }\n  static initialProps = {\n    count: 'initialCount',\n  }\n  static actions     = \"inc dec\";\n  static debug       = false;\n  static debugPrefix = 'Counter > ';\n  static debugColor  = 'orangered'\n\n  inc() {\n    this.debug(\"Incrementing count\")\n    this.setState({ count: this.state.count + 1 });\n  }\n  dec() {\n    this.debug(\"Decrementing count\")\n    this.setState({ count: this.state.count - 1 });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nThe `initialState` static property defines the initial state of the context.\nThe `initialProps` property indicates which properties can be passed to the\ncontext to set the initial state.  In this example the `count` will be set to\n`10` by default and an `initialCount` property can be passed to it to set it\nto a different value.\n\nThe `actions` list says which methods should be exposed in the context\ndata as callable action functions.  It can be specified as an array of method\nnames or as a whitespace delimited string as shown here.\n\nThe `debug` option can be set `true` to enable debugging.  The optional\n`debugPrefix` and `debugColor` allow you to customise the debugging messages\nsent to `console.log()`.  When debugging is enabled the `this.debug()` method\ncalls will generate debugging messages on the console.  Otherwise they are\nignored.\n\nThe default behaviour is to render any consumer components, passing them\nprops for each item in the state, all action functions, and any props passed\nto the context object itself.\n\nYou can define a `getRenderProps()` method to change that behaviour if you\nlike.\n\nThe default method looks like this:\n\n```js\ngetRenderProps() {\n  return this.getContext();\n}\n```\n\nYou might prefer to bundle everything up and pass a single prop to consumer\ncomponents.\n\n```js\ngetRenderProps() {\n  return { Counter: this.getContext() };\n}\n```\n\nIn this case a consumer component would look like this:\n\n```js\nconst Controls = ({Counter}) => <div>\n  <p>The current count is {Counter.count}</p>\n  <button onClick={Counter.inc}>Increment</button>\n  <button onClick={Counter.dec}>Decrement</button>\n</div>\n```\n\nThe default `getContext()` method looks like this:\n\n```js\ngetContext() {\n  return {\n    ...this.props,    // properties passed to the context\n    ...this.state,    // internal state\n    ...this.actions,  // callable action functions mapped to methods\n  };\n}\n```\n\nYou can also re-defined this method if you like.  Perhaps like this:\n\n```js\ngetContext() {\n  return {\n    props:   this.props,    // properties passed to the context\n    state:   this.state,    // internal state\n    actions: this.actions,  // callable action functions mapped to methods\n  };\n}\n```\n\nIn this case the consumer component would look like this:\n\n```js\nconst Controls = ({Counter}) => <div>\n  <p>The current count is {Counter.state.count}</p>\n  <button onClick={Counter.actions.inc}>Increment</button>\n  <button onClick={Counter.actions.dec}>Decrement</button>\n</div>\n```\n\n## Example Project\n\nThere's an example Next JS project in the\n[example](https://github.com/abw/react-context-generator/tree/master/example)\ndirectory which demonstrates it in use.\n\nTo play around with it you'll need to checkout the repository and then\ninstall the dependencies.\n\n```bash\ngit clone https://github.com/abw/react-context-generator.git\ncd react-context-generator/example\npnpm install    # or npm / yarn\npnpm dev        # or npm / yarn\n```\n","readmeFilename":"README.md","_id":"@abw/react-context-generator@2.0.0-beta.0","_integrity":"sha512-zBv0HM00XY1cejwUbXN/CSMl2ll4ZxW2XYuIN9/j/KYnyY1a+b70uqE7oQ11SON2E07mG9d3z085jCX+v9jYJw==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/4e490ce74294016414114911cde2105c/abw-react-context-generator-2.0.0-beta.0.tgz","_from":"file:abw-react-context-generator-2.0.0-beta.0.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-zBv0HM00XY1cejwUbXN/CSMl2ll4ZxW2XYuIN9/j/KYnyY1a+b70uqE7oQ11SON2E07mG9d3z085jCX+v9jYJw==","shasum":"533ef93c93ebdf2d82d1cdae6bde203919e48699","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-2.0.0-beta.0.tgz","fileCount":14,"unpackedSize":108383,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC++YOAhUbj6OaAydamhj2HFNk+bErzvOrTBV4762mdxAiEAzgndZnec4JCAldkefdPYyoPa7WJ8P/qXzVIDvGL+Tnw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDcCJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Xg/7BCY3ltV3WWIaaNI91wOIPAATxzMSSW3zJjCcTLOKW8vSeIvy\r\n4ZF3NbLsDSbDHdlT6cqF0vbaJns6VXWjtXTbovAGGUfC+B4cLmZbdEqyNYGy\r\niVew7FWesiBC05SC62+yxJohqdh7WXXPz1qvaBGBJBUratO1DfAAaG86ydNZ\r\nfvburBAQJBSV6Z2abML3r17HUJASQxFEW5TStdl6DDLzWvElC0FFieq4KtT0\r\nKtYkn+BcVjz4zwBuYbNUY0yKHjk3qIzbAn5HjC5MmHMmIQnbgHrgi7mBSI+u\r\n5e7y5+4yfVFlDqQU+tj8NTleYTPpLUWMYU4hKMkM82sfTndiXpAWTOsmkvx3\r\nf8FhN/RCaQqPsaCJHYzDagj8fi+sJZ2TdjrqbreVvT5gcxOuPC6L/ZTc3T3N\r\noqO5zpAFtbHE3Ebt/eJnbt51jS9uZIO4pjczbNEhdPk/kC9wob5bSfL5J7h8\r\nR0u8xEsoqFA6GkQQC4P8ClKs+rNhcTbWvDKY04U3WSw7mbpB3KBk8YdiL143\r\nTa5hvurFEEswIyXFxSVgCzVQHAU0hUFUE1aQY0irtbZlPNhIrd6ZUQ8ZNVa8\r\npod7OyFdt6AZHLw1/f38ONHNjGkQNQD08rdmeE2wBNcybodWwLOsG1SX4MKT\r\nPOhX6trBhKNzx5ODDI5kogYrTPGlIBqQ53s=\r\n=Yndz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_2.0.0-beta.0_1678622857116_0.32622189875270613"},"_hasShrinkwrap":false},"2.0.0-beta.1":{"name":"@abw/react-context-generator","version":"2.0.0-beta.1","description":"Higher order component to easily create and use a React context","type":"module","main":"dist/react-context-generator.cjs","module":"dist/react-context-generator.mjs","exports":{".":{"require":"./dist/react-context-generator.cjs","import":"./dist/react-context-generator.mjs"}},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","babel-jest":"^26.6.3","babel-loader":"^8.3.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","path":"^0.12.7","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.19.1","rollup-plugin-peer-deps-external":"^2.2.4"},"scripts":{"test":"jest","build":"rollup -c"},"readme":"# react-context-generator\n\n## Introduction\nThis is a small and simple module that provides some syntactic sugar to\nstreamline the use of React Context to maintain state in your React\napplications.\n\nSeriously, it's *embarassingly* small.  We're talking 20 lines\nof code or so for the main function.\n\nIf you're not already familiar with React Context then you should start by\nreading the React Context documentation: https://reactjs.org/docs/context.html\n\n## Version 2 - Breaking Changes\n\nFor version 1 you can import the `Generator` function as the default.\n\n```js\n// version 1.*.*\nimport Generator from '@abw/react-context-generator`\n```\n\nFor version 2 and above you must use named imports.\n\n```js\n// version 2.*.*\nimport { Generator } from '@abw/react-context-generator`\n```\n\n## Installation\n\nAdd `react-context-generator` to your project using your favourite package\nmanager.\n\n### npm:\n    $ npm add @abw/react-context-generator\n\n### yarn:\n    $ yarn add @abw/react-context-generator\n\n### pnpm:\n    $ pnpm add @abw/react-context-generator\n\n## Wrapping a Component that Maintains State\n\nHere's a simple example of a component that maintains some state\nand provides methods for manipulating that state.\n\n```js\n// Counter.js\nimport React from \"react\";\nimport { Generator } from \"@abw/react-context-generator\";\n\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: this.props.initialCount || 0\n    };\n    this.actions = {\n      inc: this.increment.bind(this),\n      dec: this.decrement.bind(this),\n    };\n  }\n  increment() {\n    this.setState({ count: this.state.count + 1 });\n  }\n  decrement() {\n    this.setState({ count: this.state.count - 1 });\n  }\n  render() {\n    return this.props.render({\n      ...this.state,\n      ...this.actions,\n    });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nIt stores a `count` value in the state which is initially set to `0` or a custom value\nprovided by an `initialCount` property.  It has `increment()` and `decrement()` methods\nwhich respectively add or subtract one from the count.\n\nIn the `constructor()` method we also define `this.actions` to store versions of these\nmethods that are bound to `this`, allowing them to be called as functions from anywhere\nin our code.  I've given then shorter names here - `inc` and `dec` but that's entirely\narbitrary.  The original names would serve the purpose just as well.\n\nSo far this is all fairly standard Javascript/React code.  Where it gets interesting is in\nthe `render()` method.  All we do here is call the `render()` function that is passed\nin as a property - `this.props.render()` - and pass it an object containing the things\nthat we want to share with other components.\n\nIn this case we're passing everything in the state (which in this simple example only\ncontains `count`) and the actions that we've defined to manipulate the state (`inc` and `dec`).\n\nThe final line of code calls the `Generator()` function imported from\n`@abw/react-context-generator` passing the `Counter` component as an argument.\nThis is then the default value exported by the `Counter.js` module.\n\n```js\nexport default Generator(Counter);\n```\n\n## Using the Context Provider\n\nNow when we import this module we get an object that contains two entries: a `Provider` and a `Consumer`.\n\nThe `Provider` is designed to enclose any and all components that might need to access the state.\nIt's typically added somewhere near the \"outside\" of your application.\n\n```js\n// MyApp.jsx\nimport React from \"react\";\nimport Counter from \"./Counter.js\";\n\nconst MyApp = () =>\n  <div id=\"myapp\">\n    <h1>Welcome to My Counting App!</h1>\n    <Counter.Provider>\n      ...the rest of your app goes here...\n    </Counter.Provider>\n  </div>\n\nexport default MyApp\n```\n\nYou can pass custom properties to your `Provider` if you want to.  They will get passed down to\nthe `Counter` component, e.g.\n\n```js\n  <Counter.Provider initialCount={100}>\n    ...the rest of your app goes here...\n  </Counter.Provider>\n```\n\n## Using the Context Consumer\n\nWhen you need to access the state provided by `Counter` from somewhere deep inside your app you\nsimply need to wrap it in the `Counter.Consumer` function.  All of the items that the `Counter`\nmodule shares as context will be passed into your component as properties.\n\n```js\n// Controls.js\nimport React from \"react\";\nimport Counter from \"./Counter.js\";\n\nconst Controls = ({count, inc, dec}) => <div>\n  <p>The current count is {count}</p>\n  <button onClick={inc}>Increment</button>\n  <button onClick={dec}>Decrement</button>\n</div>\n\nexport default Counter.Consumer(Controls)\n```\n\nThat's all there is to it.  Sweet and simple!\n\n## Base Class Context\n\nThere's a base class context module that you can subclass.  It provides\na number of conveniences to help you reduce the amount of code you need\nto write.\n\n```js\nimport { Generator, Context } from \"@abw/react-context-generator\";\n\nclass Counter extends Context {\n  static initialState = {\n    count: 10,\n  }\n  static initialProps = {\n    count: 'initialCount',\n  }\n  static actions     = \"inc dec\";\n  static debug       = false;\n  static debugPrefix = 'Counter > ';\n  static debugColor  = 'orangered'\n\n  inc() {\n    this.debug(\"Incrementing count\")\n    this.setState({ count: this.state.count + 1 });\n  }\n  dec() {\n    this.debug(\"Decrementing count\")\n    this.setState({ count: this.state.count - 1 });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nThe `initialState` static property defines the initial state of the context.\nThe `initialProps` property indicates which properties can be passed to the\ncontext to set the initial state.  In this example the `count` will be set to\n`10` by default and an `initialCount` property can be passed to it to set it\nto a different value.\n\nThe `actions` list says which methods should be exposed in the context\ndata as callable action functions.  It can be specified as an array of method\nnames or as a whitespace delimited string as shown here.\n\nThe `debug` option can be set `true` to enable debugging.  The optional\n`debugPrefix` and `debugColor` allow you to customise the debugging messages\nsent to `console.log()`.  When debugging is enabled the `this.debug()` method\ncalls will generate debugging messages on the console.  Otherwise they are\nignored.\n\nThe default behaviour is to render any consumer components, passing them\nprops for each item in the state, all action functions, and any props passed\nto the context object itself.\n\nYou can define a `getRenderProps()` method to change that behaviour if you\nlike.\n\nThe default method looks like this:\n\n```js\ngetRenderProps() {\n  return this.getContext();\n}\n```\n\nYou might prefer to bundle everything up and pass a single prop to consumer\ncomponents.\n\n```js\ngetRenderProps() {\n  return { Counter: this.getContext() };\n}\n```\n\nIn this case a consumer component would look like this:\n\n```js\nconst Controls = ({Counter}) => <div>\n  <p>The current count is {Counter.count}</p>\n  <button onClick={Counter.inc}>Increment</button>\n  <button onClick={Counter.dec}>Decrement</button>\n</div>\n```\n\nThe default `getContext()` method looks like this:\n\n```js\ngetContext() {\n  return {\n    ...this.props,    // properties passed to the context\n    ...this.state,    // internal state\n    ...this.actions,  // callable action functions mapped to methods\n  };\n}\n```\n\nYou can also re-defined this method if you like.  Perhaps like this:\n\n```js\ngetContext() {\n  return {\n    props:   this.props,    // properties passed to the context\n    state:   this.state,    // internal state\n    actions: this.actions,  // callable action functions mapped to methods\n  };\n}\n```\n\nIn this case the consumer component would look like this:\n\n```js\nconst Controls = ({Counter}) => <div>\n  <p>The current count is {Counter.state.count}</p>\n  <button onClick={Counter.actions.inc}>Increment</button>\n  <button onClick={Counter.actions.dec}>Decrement</button>\n</div>\n```\n\n## Example Project\n\nThere's an example Next JS project in the\n[example](https://github.com/abw/react-context-generator/tree/master/example)\ndirectory which demonstrates it in use.\n\nTo play around with it you'll need to checkout the repository and then\ninstall the dependencies.\n\n```bash\ngit clone https://github.com/abw/react-context-generator.git\ncd react-context-generator/example\npnpm install    # or npm / yarn\npnpm dev        # or npm / yarn\n```\n","readmeFilename":"README.md","_id":"@abw/react-context-generator@2.0.0-beta.1","_integrity":"sha512-DTh2C9FUsfNVwAVHnnWO9OXytdZJ97Gyn2OwBDNLVF13ko1vVejtW0HzHxiu+IWn1ZE4FFpzvmxz1Rmj1T86ng==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/d47bb258aabbebb3e170793fb9fcb75e/abw-react-context-generator-2.0.0-beta.1.tgz","_from":"file:abw-react-context-generator-2.0.0-beta.1.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-DTh2C9FUsfNVwAVHnnWO9OXytdZJ97Gyn2OwBDNLVF13ko1vVejtW0HzHxiu+IWn1ZE4FFpzvmxz1Rmj1T86ng==","shasum":"a7929b9f3e62f245981158ec610f4eef03f9f7cb","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-2.0.0-beta.1.tgz","fileCount":14,"unpackedSize":109954,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOO6tX4A/cG3LU4oKaqbXOnWSUX9Daau9W6VBJ6NJTiwIhAJjgUXDprB+Q+B1Gvo6dXfYZsLa5DYzc+z3SfLNoA13M"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDcc1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzrg/8DVdEX+ZY3pJuioSxjkwaAlyb7Gxh4WvORJFLDpiSEyaPHA6u\r\n+j58QkK3AZPpRZ2q6AJZO0197zMcqmPJG1wWVzIYkEWeZt0b47wzAanj06fl\r\nwZJUPVwayxX0xE1iUP1dGp3HqXS1yWJqklDOrmIkl85QiKnK8uW5+9po7Ul3\r\n/gj4c9qAzk+O5wlthEWv9FfpKSugDEO/3/YuWERTix2LMbeAsU+fi9fct+lm\r\nmAVgbg1vhU/OIJFcmAmG/920xS0a72RUUgunh6dEOsRybZGOkJHop9SdJaiN\r\nZNU7RJqONf6UUKWTB7oN8e90g4/SC7Z8M7s61DAAgtrKdPWCXGblrwEFqMRS\r\nbWgZJGnIyBjU7SUNwLmjb5OBzjmPhGGF3WYRJR0YzVtSSsA7Zvr9eaaBKnWB\r\n4XM8wCb6umKH8Z/g8k+BM27t3taW6DFQ7svW43Vx+4EtQ4U/Phco/+rvRORi\r\nRvRQuU+vvXMbBDcWGDKseWDap5N8WPiYVjq36JJR+Z0AWXWC7l9fOgajZR4D\r\nFY1E/a7NRWdDg1KYzr+lhcox3yeaIel2JoTmChrJl5VamMroMpS0qlF/KtaL\r\nOZ7evSzzQcXtbxm3hojzql/b52jNARZJmdICKOVYsH9QjIePAHBoR+GfeVaN\r\nmoDX9wDDDdut5P7ifwAlGItmUGhMaDwQqQI=\r\n=ZjGl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_2.0.0-beta.1_1678624564948_0.14495950121886514"},"_hasShrinkwrap":false},"2.0.0":{"name":"@abw/react-context-generator","version":"2.0.0","description":"Higher order component to easily create and use a React context","type":"module","main":"dist/react-context-generator.cjs","module":"dist/react-context-generator.mjs","exports":{".":{"require":"./dist/react-context-generator.cjs","import":"./dist/react-context-generator.mjs"}},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","babel-jest":"^26.6.3","babel-loader":"^8.3.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","path":"^0.12.7","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.19.1","rollup-plugin-peer-deps-external":"^2.2.4"},"scripts":{"test":"jest","build":"rollup -c"},"_id":"@abw/react-context-generator@2.0.0","_integrity":"sha512-ODx/1itG32vDfMX/n7nsKMdyKTWZG1WNvD7DPXawRW2uiK/3j/qbuoYsA5R6JHMfdvupXG9XaB/8kmU7DYFI/g==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/ad24b727c86116e95a118c28286f7c3d/abw-react-context-generator-2.0.0.tgz","_from":"file:abw-react-context-generator-2.0.0.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ODx/1itG32vDfMX/n7nsKMdyKTWZG1WNvD7DPXawRW2uiK/3j/qbuoYsA5R6JHMfdvupXG9XaB/8kmU7DYFI/g==","shasum":"165ada8e8a325a922deb34c8438a1b3cc5893f96","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-2.0.0.tgz","fileCount":14,"unpackedSize":109947,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6xDD6gelfczkMxE7K137JM37HyxM4jbpbRDfgvoZB4AiAWBEymNcL+Qx/uwm9iyqKRTB5Tjx/g5PZJs8s7oOE3JQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDcfFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSLhAAjCQfYbvUz6LwNchbGjDZyqLzsklaAc5exC4y9HRVEHJfwwTy\r\nI8eBQl29erExZfhh1iPwSPhHnj3PzhffD7T3T2FrkKasuYIEc4HbueXh3WY6\r\ntxBxcgeTByYcA91n1nwHZwEyaq4eLMa8vG7IJUOVMhcjJ8sVvMqWmWX1yOmZ\r\nZS5fzUEonvhGLpVC5w2wQfxi+9Cci9sHzQN0+ZX7mKiAJD6/WYZJySolf4D0\r\ncLzMv+RVukdAO/lPWyj58N+XBVvmn8FWJgLkIoVK7+N8sEzFqARdYMTIQ8eX\r\nhjqd2eiksCqDDNu8TsYNdCmUKVSLRAHQCb3nWJNv1tlX0SIyvL/vPqGpoiO2\r\n0+t78HlXCw0y5clrJ6OK5j6kXqPZaULjTsdyD1WmdM8F1sYdwPeAyA458COU\r\nIfyaSMMb+1Quxr9szuJlSGSVeucupbF6AQ2hUcrxw1J7/454469s/mKap2SQ\r\nCAnKHQ3OUfACQ1bZ8ZjmFVPzGaYLBUet3bjgaV6UK0xxx2OfmrjosEwIveeE\r\no88TMDQ9/IaA+ZXJvSK5kQrid/tXKaoYwwZqAeYuy1tfcGEyG0FqFVXLc4Zw\r\n1czo9SyTzXLLBtMgITyLSem/dILT40IksIMaWwNClmpvYmhq1Tyem/RN2DMh\r\nHJRtcbQC4CtiNQ/8ZStm9bfg+/LntmLMyK0=\r\n=OLy1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_2.0.0_1678624709133_0.45924778836798597"},"_hasShrinkwrap":false},"2.0.1":{"name":"@abw/react-context-generator","version":"2.0.1","description":"Higher order component to easily create and use a React context","type":"module","main":"dist/react-context-generator.cjs","module":"dist/react-context-generator.mjs","exports":{".":{"require":"./dist/react-context-generator.cjs","import":"./dist/react-context-generator.mjs"}},"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"keywords":["react","context","small","simple"],"author":{"name":"Andy Wardley"},"license":"MIT","bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"homepage":"https://github.com/abw/react-context-generator#readme","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","babel-jest":"^26.6.3","babel-loader":"^8.3.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","path":"^0.12.7","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.19.1","rollup-plugin-peer-deps-external":"^2.2.4"},"scripts":{"test":"jest","build":"rollup -c"},"_id":"@abw/react-context-generator@2.0.1","_integrity":"sha512-3STvprXyG2lI3yn+kUJ7n3SIN37D1DB6HiC/7SZg0qCHgPPyH5Rq0POC2IV7sLJBk0IKyIewn9hKwTq2/WIBjw==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/73b8cc0039258bde1da94a62c4b99913/abw-react-context-generator-2.0.1.tgz","_from":"file:abw-react-context-generator-2.0.1.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-3STvprXyG2lI3yn+kUJ7n3SIN37D1DB6HiC/7SZg0qCHgPPyH5Rq0POC2IV7sLJBk0IKyIewn9hKwTq2/WIBjw==","shasum":"d84585bbab348e06a53c3c837fc09c5bff49ce09","tarball":"https://registry.npmjs.org/@abw/react-context-generator/-/react-context-generator-2.0.1.tgz","fileCount":14,"unpackedSize":110440,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsULWX7CZ9CYwwAF6cDSx49vbVz03huiWa3XJqZ7M5oAiBG4aP4La4xB5DpVwZeDh44ccfodcr2Bma+PkdnBMLW2A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkM9QeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqaqg//dYzUjtRyMHu+i2U/x5Fu5glOjcxKk3mxYbyWvjazK3LMJtVw\r\nQbf4XZ6j2jORR4fGhS3OzAl3gLy/14pXpFWiPB5YeBUvdO7hIKj4f6ibqGPr\r\ndML5vD1/dHmyTZqiUzLdUYVF4iU0RRI0l4nqobzMOZ6R7o5O17g6IhaUvcN/\r\nuO04V8hssvATJCgoluZ7oxTRCyldqz/6Fh/FnHGBk6NYnnhwg2udTZG3quCB\r\nBBhsUOMy+W1LUkTCZFoiKcpdbp6hBN3got00sJCLsxF7n764k7jyoCEJ7Nzg\r\nNC5eDvul+ia1QKEYji2joxU4krett2JEOOEtGOqMbynbMB8l1UJ3nZaLGFnW\r\nTskVuHW3CZiPQMysC2YASEzmbVAETiBuxYM8QszuHFiBz0DD434+NwP7gRAN\r\nAZmxrfu0aJcxPNR4VNo2cZ1PYDL7eFVhFUboVoasHlB9EocXSM5+mbGKm/mn\r\nTnH0iyCqWQ5p3KrYqLwcXMHlUnqNEjIz1Mjk7VUI0p1LBD3DWpFXX4PHHMtF\r\nVudOH3iatGKyraCeRlsjcch4bmDWPlpSqywu16TshoA+a0DVAO/ww/zwqjEW\r\nN13WTES7OVJ2GFOsX7qnCbq7DU7VdhM/erezZSMAAmrFGntmJ5CtLqi7qe1u\r\nt1PnjXZl0FSL8SLdrVM7pjCTc823JtcVNTk=\r\n=r8fd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-context-generator_2.0.1_1681118238739_0.33970708799687444"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-22T13:32:09.649Z","1.0.0":"2020-09-22T13:32:09.917Z","modified":"2023-04-10T09:17:19.011Z","1.1.0":"2021-10-11T11:46:02.423Z","1.1.1":"2022-05-27T06:43:50.107Z","1.1.2-beta.0":"2023-03-11T18:04:22.899Z","1.1.2-beta.1":"2023-03-11T18:15:14.407Z","1.2.0":"2023-03-12T07:16:28.444Z","2.0.0-beta.0":"2023-03-12T12:07:37.343Z","2.0.0-beta.1":"2023-03-12T12:36:05.161Z","2.0.0":"2023-03-12T12:38:29.347Z","2.0.1":"2023-04-10T09:17:18.903Z"},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"description":"Higher order component to easily create and use a React context","homepage":"https://github.com/abw/react-context-generator#readme","keywords":["react","context","small","simple"],"repository":{"type":"git","url":"git+https://github.com/abw/react-context-generator.git"},"author":{"name":"Andy Wardley"},"bugs":{"url":"https://github.com/abw/react-context-generator/issues"},"license":"MIT","readme":"# react-context-generator\n\n## DEPRECATION NOTICE\n\nThis module has been superceded by [@abw/react-context](https://www.npmjs.com/package/@abw/react-context).  It does the same thing and a little bit more.  The name\nchange reflects the fact that it's no longer just a context generator.\n\nIt works the same way and should be a drop-in replacement (although see the\nnote below about [breaking changes](#version-2---breaking-changes) between\nversions 1 and 2).\n\nThis module will continue to be available but no further development will be\ndone on it.\n\n## Introduction\n\nThis is a small and simple module that provides some syntactic sugar to\nstreamline the use of React Context to maintain state in your React\napplications.\n\nSeriously, it's *embarassingly* small.  We're talking 20 lines\nof code or so for the main function.\n\nIf you're not already familiar with React Context then you should start by\nreading the React Context documentation: https://reactjs.org/docs/context.html\n\n## Version 2 - Breaking Changes\n\nFor version 1 you can import the `Generator` function as the default.\n\n```js\n// version 1.*.*\nimport Generator from '@abw/react-context-generator`\n```\n\nFor version 2 and above you must use named imports.\n\n```js\n// version 2.*.*\nimport { Generator } from '@abw/react-context-generator`\n```\n\n## Installation\n\nAdd `react-context-generator` to your project using your favourite package\nmanager.\n\n### npm:\n    $ npm add @abw/react-context-generator\n\n### yarn:\n    $ yarn add @abw/react-context-generator\n\n### pnpm:\n    $ pnpm add @abw/react-context-generator\n\n## Wrapping a Component that Maintains State\n\nHere's a simple example of a component that maintains some state\nand provides methods for manipulating that state.\n\n```js\n// Counter.js\nimport React from \"react\";\nimport { Generator } from \"@abw/react-context-generator\";\n\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: this.props.initialCount || 0\n    };\n    this.actions = {\n      inc: this.increment.bind(this),\n      dec: this.decrement.bind(this),\n    };\n  }\n  increment() {\n    this.setState({ count: this.state.count + 1 });\n  }\n  decrement() {\n    this.setState({ count: this.state.count - 1 });\n  }\n  render() {\n    return this.props.render({\n      ...this.state,\n      ...this.actions,\n    });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nIt stores a `count` value in the state which is initially set to `0` or a custom value\nprovided by an `initialCount` property.  It has `increment()` and `decrement()` methods\nwhich respectively add or subtract one from the count.\n\nIn the `constructor()` method we also define `this.actions` to store versions of these\nmethods that are bound to `this`, allowing them to be called as functions from anywhere\nin our code.  I've given then shorter names here - `inc` and `dec` but that's entirely\narbitrary.  The original names would serve the purpose just as well.\n\nSo far this is all fairly standard Javascript/React code.  Where it gets interesting is in\nthe `render()` method.  All we do here is call the `render()` function that is passed\nin as a property - `this.props.render()` - and pass it an object containing the things\nthat we want to share with other components.\n\nIn this case we're passing everything in the state (which in this simple example only\ncontains `count`) and the actions that we've defined to manipulate the state (`inc` and `dec`).\n\nThe final line of code calls the `Generator()` function imported from\n`@abw/react-context-generator` passing the `Counter` component as an argument.\nThis is then the default value exported by the `Counter.js` module.\n\n```js\nexport default Generator(Counter);\n```\n\n## Using the Context Provider\n\nNow when we import this module we get an object that contains two entries: a `Provider` and a `Consumer`.\n\nThe `Provider` is designed to enclose any and all components that might need to access the state.\nIt's typically added somewhere near the \"outside\" of your application.\n\n```js\n// MyApp.jsx\nimport React from \"react\";\nimport Counter from \"./Counter.js\";\n\nconst MyApp = () =>\n  <div id=\"myapp\">\n    <h1>Welcome to My Counting App!</h1>\n    <Counter.Provider>\n      ...the rest of your app goes here...\n    </Counter.Provider>\n  </div>\n\nexport default MyApp\n```\n\nYou can pass custom properties to your `Provider` if you want to.  They will get passed down to\nthe `Counter` component, e.g.\n\n```js\n  <Counter.Provider initialCount={100}>\n    ...the rest of your app goes here...\n  </Counter.Provider>\n```\n\n## Using the Context Consumer\n\nWhen you need to access the state provided by `Counter` from somewhere deep inside your app you\nsimply need to wrap it in the `Counter.Consumer` function.  All of the items that the `Counter`\nmodule shares as context will be passed into your component as properties.\n\n```js\n// Controls.js\nimport React from \"react\";\nimport Counter from \"./Counter.js\";\n\nconst Controls = ({count, inc, dec}) => <div>\n  <p>The current count is {count}</p>\n  <button onClick={inc}>Increment</button>\n  <button onClick={dec}>Decrement</button>\n</div>\n\nexport default Counter.Consumer(Controls)\n```\n\nThat's all there is to it.  Sweet and simple!\n\n## Base Class Context\n\nThere's a base class context module that you can subclass.  It provides\na number of conveniences to help you reduce the amount of code you need\nto write.\n\n```js\nimport { Generator, Context } from \"@abw/react-context-generator\";\n\nclass Counter extends Context {\n  static initialState = {\n    count: 10,\n  }\n  static initialProps = {\n    count: 'initialCount',\n  }\n  static actions     = \"inc dec\";\n  static debug       = false;\n  static debugPrefix = 'Counter > ';\n  static debugColor  = 'orangered'\n\n  inc() {\n    this.debug(\"Incrementing count\")\n    this.setState({ count: this.state.count + 1 });\n  }\n  dec() {\n    this.debug(\"Decrementing count\")\n    this.setState({ count: this.state.count - 1 });\n  }\n}\n\nexport default Generator(Counter);\n```\n\nThe `initialState` static property defines the initial state of the context.\nThe `initialProps` property indicates which properties can be passed to the\ncontext to set the initial state.  In this example the `count` will be set to\n`10` by default and an `initialCount` property can be passed to it to set it\nto a different value.\n\nThe `actions` list says which methods should be exposed in the context\ndata as callable action functions.  It can be specified as an array of method\nnames or as a whitespace delimited string as shown here.\n\nThe `debug` option can be set `true` to enable debugging.  The optional\n`debugPrefix` and `debugColor` allow you to customise the debugging messages\nsent to `console.log()`.  When debugging is enabled the `this.debug()` method\ncalls will generate debugging messages on the console.  Otherwise they are\nignored.\n\nThe default behaviour is to render any consumer components, passing them\nprops for each item in the state, all action functions, and any props passed\nto the context object itself.\n\nYou can define a `getRenderProps()` method to change that behaviour if you\nlike.\n\nThe default method looks like this:\n\n```js\ngetRenderProps() {\n  return this.getContext();\n}\n```\n\nYou might prefer to bundle everything up and pass a single prop to consumer\ncomponents.\n\n```js\ngetRenderProps() {\n  return { Counter: this.getContext() };\n}\n```\n\nIn this case a consumer component would look like this:\n\n```js\nconst Controls = ({Counter}) => <div>\n  <p>The current count is {Counter.count}</p>\n  <button onClick={Counter.inc}>Increment</button>\n  <button onClick={Counter.dec}>Decrement</button>\n</div>\n```\n\nThe default `getContext()` method looks like this:\n\n```js\ngetContext() {\n  return {\n    ...this.props,    // properties passed to the context\n    ...this.state,    // internal state\n    ...this.actions,  // callable action functions mapped to methods\n  };\n}\n```\n\nYou can also re-defined this method if you like.  Perhaps like this:\n\n```js\ngetContext() {\n  return {\n    props:   this.props,    // properties passed to the context\n    state:   this.state,    // internal state\n    actions: this.actions,  // callable action functions mapped to methods\n  };\n}\n```\n\nIn this case the consumer component would look like this:\n\n```js\nconst Controls = ({Counter}) => <div>\n  <p>The current count is {Counter.state.count}</p>\n  <button onClick={Counter.actions.inc}>Increment</button>\n  <button onClick={Counter.actions.dec}>Decrement</button>\n</div>\n```\n\n## Example Project\n\nThere's an example Next JS project in the\n[example](https://github.com/abw/react-context-generator/tree/master/example)\ndirectory which demonstrates it in use.\n\nTo play around with it you'll need to checkout the repository and then\ninstall the dependencies.\n\n```bash\ngit clone https://github.com/abw/react-context-generator.git\ncd react-context-generator/example\npnpm install    # or npm / yarn\npnpm dev        # or npm / yarn\n```\n","readmeFilename":"README.md"}