{"bugs":{"url":"https://github.com/ReactTraining/react-broadcast/issues"},"dist":{"shasum":"10a0132a287baa81041f2208e75c9b55a6542ea8","tarball":"https://registry.npmjs.org/react-broadcast/-/react-broadcast-0.7.0-rc.4.tgz","fileCount":7,"integrity":"sha512-5oafAL2bYpXikfQsUVGvxG98VLB2Pmf5FEV06uMvknxsch3bNNXpQm857msLqx7ZcNYlKCbK7fXcy249OI8YTg==","signatures":[{"sig":"MEUCIQDK8mAnL3BZ9PBSNEOfsSdQHE/sgd0kgXzr1nved3q97QIgTPWbJEgcmTy9585f0hoSPsssInfDgfQWx8agRKblpnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150227},"jest":{"setupFiles":["raf/polyfill"]},"main":"cjs/react-broadcast.js","name":"react-broadcast","files":["cjs","esm","umd"],"unpkg":"umd/react-broadcast.js","author":{"name":"Michael Jackson"},"module":"esm/react-broadcast.js","readme":"# react-broadcast [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-broadcast/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-broadcast\n[npm-badge]: https://img.shields.io/npm/v/react-broadcast.svg?style=flat-square\n[npm]: https://www.npmjs.com/package/react-broadcast\n\n[`react-broadcast`](https://www.npmjs.com/package/react-broadcast) provides a reliable way for React\ncomponents to propagate state changes to their descendants deep in the component hierarchy,\nbypassing intermediaries who `return false` from\n[`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate).\n\nIt was originally built to solve issues that arose from using\n[`react-router`](https://www.npmjs.com/package/react-router) together with\n[`react-redux`](https://www.npmjs.com/package/react-redux). The router needed a safe way to\ncommunicate state changes to `<Link>`s deep in the component hierarchy, but `react-redux` relies on\n`shouldComponentUpdate` for performance. `react-broadcast` allows the router to work seamlessly with\nRedux and any other component that uses `shouldComponentUpdate`.\n\n**Please note:** As with anything that uses [context](https://reactjs.org/docs/context.html), this\nlibrary is experimental. It may cease working in some future version of React. For now, it's a\npractical workaround for the router. If we discover some better way to do things in the future, rest\nassured we'll do our best to share what we learn.\n\n## Installation\n\nUsing [yarn](https://yarnpkg.com/):\n\n    $ yarn add react-broadcast\n\nThen, use as you would anything else:\n\n```js\n// using ES6 modules\nimport { createContext } from \"react-broadcast\";\n\n// using CommonJS modules\nvar createContext = require(\"react-broadcast\").createContext;\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-broadcast/umd/react-broadcast.min.js\"></script>\n```\n\nYou can find the library on `window.ReactBroadcast`.\n\n## Usage\n\nThe following is a contrived example, but illustrates the basic functionality we're after:\n\n```js\nimport React from \"react\";\nimport { createContext } from \"react-broadcast\";\n\nconst users = [{ name: \"Michael Jackson\" }, { name: \"Ryan Florence\" }];\n\nconst { Provider, Consumer } = createContext(users[0]);\n\nclass UpdateBlocker extends React.Component {\n  shouldComponentUpdate() {\n    // This is how you indicate to React's reconciler that you don't\n    // need to be updated. It's a great way to boost performance when\n    // you're sure (based on your props and state) that your render\n    // output will not change, but it makes it difficult for libraries\n    // to communicate changes down the hierarchy that you don't really\n    // know anything about.\n    return false;\n  }\n\n  render() {\n    return this.props.children;\n  }\n}\n\nclass App extends React.Component {\n  state = {\n    currentUser: Provider.defaultValue\n  };\n\n  componentDidMount() {\n    // Randomly change the current user every 2 seconds.\n    setInterval(() => {\n      const index = Math.floor(Math.random() * users.length);\n      this.setState({ currentUser: users[index] });\n    }, 2000);\n  }\n\n  render() {\n    return (\n      <Provider value={this.state.currentUser}>\n        <UpdateBlocker>\n          <Consumer>\n            {currentUser => <p>The current user is {currentUser.name}</p>}\n          </Consumer>\n        </UpdateBlocker>\n      </Provider>\n    );\n  }\n}\n```\n\nEnjoy!\n\n## About\n\nreact-broadcast is developed and maintained by [React Training](https://reacttraining.com). If\nyou're interested in learning more about what React can do for your company, please [get in\ntouch](mailto:hello@reacttraining.com)!\n","gitHead":"59719f3e61cbe3920787443b13d164a074956b85","license":"MIT","scripts":{"lint":"eslint modules","test":"jest","build":"node ./scripts/build.js","clean":"git clean -fdX .","prepublishOnly":"node ./scripts/build.js"},"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"homepage":"https://github.com/ReactTraining/react-broadcast#readme","keywords":["react","context","broadcast","publish","subscribe","subscriber","subscription","subscriptions"],"repository":{"url":"git+https://github.com/ReactTraining/react-broadcast.git","type":"git"},"_npmVersion":"5.6.0","description":"Reliably communicate state changes to deeply nested React elements","directories":{},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_nodeVersion":"9.5.0","dependencies":{"warning":"^3.0.0","prop-types":"^15.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"raf":"^3.4.0","jest":"^21.0.2","react":"^16.2.0","eslint":"^3.3.1","rollup":"^0.53.4","gzip-size":"^3.0.0","react-dom":"^16.2.0","babel-core":"^6.17.0","pascal-case":"^2.0.1","babel-eslint":"^7.0.0","pretty-bytes":"^4.0.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.5.0","eslint-plugin-jest":"^21.0.2","babel-preset-minify":"^0.2.0","rollup-plugin-babel":"^3.0.3","babel-preset-stage-1":"^6.5.0","eslint-plugin-import":"^2.0.0","rollup-plugin-uglify":"^2.0.1","rollup-plugin-replace":"^2.0.0","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.2.11"},"peerDependencies":{"react":">=15 || ^16"},"_npmOperationalInternal":{"tmp":"tmp/react-broadcast_0.7.0-rc.4_1518054723446_0.7406211863157317","host":"s3://npm-registry-packages"},"_id":"react-broadcast@0.7.0-rc.4","version":"0.7.0-rc.4"}