{"_id":"react-page-width","_rev":"306037","name":"react-page-width","description":"React mixin so a component can always know the current page width","dist-tags":{"latest":"1.0.1"},"maintainers":[{"name":"kylemathews","email":""}],"time":{"modified":"2021-06-03T19:31:58.000Z","created":"2015-05-20T21:07:18.927Z","1.0.1":"2015-05-21T01:27:00.219Z","1.0.0":"2015-05-20T21:07:18.927Z"},"users":{},"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/KyleAMathews/react-page-width.git"},"versions":{"1.0.1":{"name":"react-page-width","description":"React mixin so a component can always know the current page width","version":"1.0.1","author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"bugs":{"url":"https://github.com/KyleAMathews/react-page-width/issues"},"dependencies":{"raf":"^2.0.4"},"devDependencies":{"chroma-js":"^0.7.2","cjsx-loader":"^2.0.1","coffee-loader":"^0.7.2","coffee-react":"^3.2.0","coffee-script":"^1.9.2","color-pairs-picker":"^1.3.2","lodash.throttle":"^3.0.3","react":"^0.13.3","react-headroom":"^1.6.0","react-hot-loader":"^1.2.7","react-responsive-grid":"^0.1.2","react-tween-state":"0.0.5","typography":"^0.3.0","webpack":"^1.9.7","webpack-dev-server":"^1.8.2"},"homepage":"https://github.com/KyleAMathews/react-page-width#readme","keywords":["page","react","react-component","width","width"],"license":"MIT","main":"dist/index.js","peerDependencies":{"react":"*"},"repository":{"type":"git","url":"git+https://github.com/KyleAMathews/react-page-width.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","watch":"webpack-dev-server --hot"},"gitHead":"6af401eade5aba7083187ffd6dbdaf07e2e7cee3","_id":"react-page-width@1.0.1","_shasum":"264e5bffe3cd2a7d7a9ee9bb800df6333aaac990","_from":".","_npmVersion":"2.9.0","_nodeVersion":"0.10.35","_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"maintainers":[{"name":"kylemathews","email":""}],"dist":{"shasum":"264e5bffe3cd2a7d7a9ee9bb800df6333aaac990","size":82018,"noattachment":false,"key":"/react-page-width/-/react-page-width-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-page-width/download/react-page-width-1.0.1.tgz"},"directories":{},"publish_time":1432171620219,"_cnpm_publish_time":1432171620219,"_hasShrinkwrap":false},"1.0.0":{"name":"react-page-width","description":"React mixin so a component can always know the current page width","version":"1.0.0","author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"bugs":{"url":"https://github.com/KyleAMathews/react-page-width/issues"},"dependencies":{"raf":"^2.0.4"},"devDependencies":{"chroma-js":"^0.7.2","cjsx-loader":"^2.0.1","coffee-loader":"^0.7.2","coffee-react":"^3.2.0","coffee-script":"^1.9.2","color-pairs-picker":"^1.3.2","lodash.throttle":"^3.0.3","react":"^0.13.3","react-headroom":"^1.6.0","react-hot-loader":"^1.2.7","react-responsive-grid":"^0.1.2","react-tween-state":"0.0.5","typography":"^0.3.0","webpack":"^1.9.7","webpack-dev-server":"^1.8.2"},"homepage":"https://github.com/KyleAMathews/react-page-width#readme","keywords":["page","react","react-component","width","width"],"license":"MIT","main":"dist/index.js","peerDependencies":{"react":"*"},"repository":{"type":"git","url":"git+https://github.com/KyleAMathews/react-page-width.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","watch":"webpack-dev-server --hot"},"gitHead":"bd6a3d625a26106b457587e3d8dd628ec7d18667","_id":"react-page-width@1.0.0","_shasum":"c90a9619809655f79e7adad9c1c94af8f05a5318","_from":".","_npmVersion":"2.9.0","_nodeVersion":"0.10.35","_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"maintainers":[{"name":"kylemathews","email":""}],"dist":{"shasum":"c90a9619809655f79e7adad9c1c94af8f05a5318","size":81939,"noattachment":false,"key":"/react-page-width/-/react-page-width-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-page-width/download/react-page-width-1.0.0.tgz"},"directories":{},"publish_time":1432156038927,"_cnpm_publish_time":1432156038927,"_hasShrinkwrap":false}},"readme":"# react-page-width\nHigh performance React mixin so a component can always know the current page width.\n\nCreates only one window resize event listener so 100s of components can\neasily listen in to page width changes.\n\n## Install\n`npm install react-page-width`\n\n## Usage\n```javascript\nvar PageWidthMixin = require('react-page-width')\n\nmodule.exports = React.createClass({\n  mixins: [PageWidthMixin],\n  render: function() {\n    // this.state.pageWidth is available!\n    if (this.state.pageWidth > 700) {\n      <div>Big page</div>\n    }\n    else {\n      <div>Small page</div>\n    }\n  }\n})\n```\n\n## Server side rendering\nYou can also pass in an `initialPageWidth` value so a value is available\nfor server side rendering.\n","_attachments":{},"homepage":"https://github.com/KyleAMathews/react-page-width#readme","bugs":{"url":"https://github.com/KyleAMathews/react-page-width/issues"},"license":"MIT"}