{"_id":"react-media","_rev":"48-eef0057825106cb9c8a96335e321f32d","name":"react-media","dist-tags":{"latest":"1.10.0","next":"2.0.0-rc.1"},"versions":{"0.0.1":{"name":"react-media","version":"0.0.1","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Kiran Abburi"},"license":"MIT","_id":"react-media@0.0.1","_shasum":"42b496979e690cdee3b59fd773c136c54fdb948d","_from":".","_npmVersion":"2.1.3","_nodeVersion":"0.10.26","_npmUser":{"name":"akiran","email":"kiran.coder0@gmail.com"},"maintainers":[{"name":"akiran","email":"kiran.coder0@gmail.com"}],"dist":{"shasum":"42b496979e690cdee3b59fd773c136c54fdb948d","tarball":"https://registry.npmjs.org/react-media/-/react-media-0.0.1.tgz","integrity":"sha512-kjVmvFjhYOYlWPu3dH5l6GobLLy8EcwDpms719E9zbrGE8NTYCy8e7pyVChbatU8EcLsVBzpWECDiEi/v9OUiw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLoGKePgTOTTD9FYZSNry1reRqq5My0UO6Z+gMpInpxQIgfvkM/RzFnL1qf0kgpbk9Q+FDMPbDvEesPmveh9M8n6o="}]},"directories":{}},"0.1.0":{"name":"react-media","version":"0.1.0","description":"A declarative media query component for React","repository":{"type":"git","url":"git+https://github.com/mjackson/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^6.1.2","babel-loader":"^6.2.4","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^7.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^1.12.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.1.2","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^3.0.1","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"1371d32556a56ece942f36b01fe868bf9673de8c","bugs":{"url":"https://github.com/mjackson/react-media/issues"},"homepage":"https://github.com/mjackson/react-media#readme","_id":"react-media@0.1.0","_shasum":"d3506a6e90ae60c8df1a286520aeb87072bc13e3","_from":".","_npmVersion":"3.8.6","_nodeVersion":"6.0.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"d3506a6e90ae60c8df1a286520aeb87072bc13e3","tarball":"https://registry.npmjs.org/react-media/-/react-media-0.1.0.tgz","integrity":"sha512-D4qdVMm5xjKcgA5hE/okoM4XkIqg3XpBAkz+eFfeXnTihep1MkSBmNgPF20KckCun7+vkAHuWox7Tmxbsz/ZSA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPRwxCmq/+r6XxrcSDRGsCGAh6JXm+zPEJ2bfbsHOeQAiEArFWaLOSosYBefmppaFChCwTgm8H25MO9DiHV6TZynsk="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-media-0.1.0.tgz_1470248115078_0.5223057826515287"},"directories":{}},"1.0.0":{"name":"react-media","version":"1.0.0","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/mjackson/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^6.1.2","babel-loader":"^6.2.4","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^7.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^1.12.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.1.2","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^3.0.1","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"41ea9c93d5096f0670536e9f0e96b8ee216baf37","bugs":{"url":"https://github.com/mjackson/react-media/issues"},"homepage":"https://github.com/mjackson/react-media#readme","_id":"react-media@1.0.0","_shasum":"b02984691ab044448ecf3d33a936056fbe074092","_from":".","_npmVersion":"3.8.6","_nodeVersion":"6.0.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"b02984691ab044448ecf3d33a936056fbe074092","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.0.0.tgz","integrity":"sha512-dF9JokbniTiMflDvJvTYtUxmkKGCbaaoV8GBALxR68sa9C9OXgtD8GusohhqJWmKCJXxnIWIX2g8Ks1lyTr2mg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqsr/eyqez9RYqfqQQXjtpBE5Efe7SEmLhNbi4eYeMIwIgAKnKwYB6j+1Nu1WHxJKwOcznJxDKnycH6dwo0MEl48U="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.0.0.tgz_1470249071388_0.8949364577420056"},"directories":{}},"1.1.0":{"name":"react-media","version":"1.1.0","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^6.1.2","babel-loader":"^6.2.4","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^7.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^1.12.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.1.2","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^3.0.1","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"a7c461f9be485c07ce41b2e72be16c0e60b885e9","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.1.0","_shasum":"d3e8aeab3ed681944554093509670caadab218d3","_from":".","_npmVersion":"3.8.6","_nodeVersion":"6.0.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"d3e8aeab3ed681944554093509670caadab218d3","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.1.0.tgz","integrity":"sha512-1LRQ5HIvqhfx3HAOpzGYtKTJuJzWlhWM3VuLHnM9uaUYjyXbbij4VM8P6j2caYtZfycV9Yu8EXXN+Cx0Nxrz4A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDQeOjj4RlZrgiqgvwR96yBWwo0lva+wMKxYs873sG5AiEA1QZocwQJDDU0V7PjBUhIS8SdcN9SbJmzIjmLeQ5VrAM="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-media-1.1.0.tgz_1470267906492_0.579132113372907"},"directories":{}},"1.1.1":{"name":"react-media","version":"1.1.1","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^6.1.2","babel-loader":"^6.2.4","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^7.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^1.12.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.1.2","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^3.0.1","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"e9e96bddab5d724c133086a257294b58d76e6d95","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.1.1","_shasum":"df02f4034ae93dee07a24877377a655097165823","_from":".","_npmVersion":"3.8.6","_nodeVersion":"6.0.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"df02f4034ae93dee07a24877377a655097165823","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.1.1.tgz","integrity":"sha512-rAnLUa0K2+Ia+X5j2SdsSZ82GKAWM19bg/NeFnJoGxHbsnLeze2mtiFAkU+ZXPOEJk0RexmnaQ5QVL1ceCEQgw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoYwDk1xCcIQ2JvPiiPbhSzlk3MpmOFk9pq0vYlxF6fgIgXVLAPqOS5Bf7dQ5suSbCMtiEhwdwrbxj0ruK1XRZ56E="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.1.1.tgz_1470284359060_0.8854939092416316"},"directories":{}},"1.2.0":{"name":"react-media","version":"1.2.0","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib --ignore '__tests__'","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^6.1.2","babel-loader":"^6.2.4","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^7.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^1.12.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.1.2","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^3.0.1","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"f464d5d32d0b3239f72cd846d8a288c8143389e1","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.2.0","_shasum":"3b85836c137b30c0f9da795cfcc784e32fb56d10","_from":".","_npmVersion":"3.8.6","_nodeVersion":"6.0.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"3b85836c137b30c0f9da795cfcc784e32fb56d10","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.2.0.tgz","integrity":"sha512-a6SX9eY00GNu9NaMW7ojrQrQ0Z8u1mL+cEnf0eaL30D0IYTUlAzkkij3CK5XZVsQxhWQXx27g0g3mTmhZdbftw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHYP3wpNAm2u+ux8FMXmnmbonEw2tPnpsSbYvl+9S+GAiEArdksJ8V8HZWAa6I6TSavzF0oo8wiUzjkIHYiOV0augw="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-media-1.2.0.tgz_1470323622202_0.5190762202255428"},"directories":{}},"1.2.1":{"name":"react-media","version":"1.2.1","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib --ignore '__tests__'","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^6.1.2","babel-loader":"^6.2.4","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^7.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^1.12.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.1.2","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^3.0.1","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"6e0aabcb8da76d856b22ff8bfb2f2a9acfb31574","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.2.1","_shasum":"43864da9d62a52d6b30bb904b3423abe70e17da8","_from":".","_npmVersion":"3.8.6","_nodeVersion":"6.0.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"43864da9d62a52d6b30bb904b3423abe70e17da8","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.2.1.tgz","integrity":"sha512-WKUbXCyN59hygG3eRcikc0fB+O5Yv0z+1HVKXkfW7lfze2GphAQEJqoUFTlf1ihv440Wc24des6R+7C5MC6MrQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa0GKkLrzmIwe9d0l4JyL59mTtfnijfYKIruUMn0z3zwIgDBr2SzIeNZdhZM9urwkXdS2TCUBnvNT25c5+a+oXswg="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.2.1.tgz_1470324572157_0.515891274670139"},"directories":{}},"1.2.2":{"name":"react-media","version":"1.2.2","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib --ignore '__tests__'","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-dev-expression":"^0.2.1","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^8.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^4.0.2","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"31065e867a9ae31708722bbc7fabbe3a4c426c03","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.2.2","_shasum":"250cd43fd73fa49c5c129daa5a678ca2940821ab","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"250cd43fd73fa49c5c129daa5a678ca2940821ab","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.2.2.tgz","integrity":"sha512-AnWAhZE4q8tSydTTbU7Ut/QoegOHiNqfb9ySVzG1D0AHxw6NgPaWoO0KYUqk9LYjY8OxW5jPy2AqndzXGBP27Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsJKcibeS7+oZofAUL3V/hFQm0ZYq7vmDSJyknigMSXAiEA0iMtRhUUwCix+EOg1GG07ntuSxfpcsEGCrlW/74SIk4="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.2.2.tgz_1475274170481_0.42561115766875446"},"directories":{}},"1.3.0":{"name":"react-media","version":"1.3.0","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","main":"lib","files":["lib","umd"],"scripts":{"build":"node ./scripts/build.js","build-lib":"rimraf lib && babel ./modules -d lib --ignore '__tests__'","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-dev-expression":"^0.2.1","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^8.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","json2mq":"^0.2.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^4.0.2","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","rimraf":"^2.5.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"55aa7f971b290b3c5f4495de580dfa3402e6d28b","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.3.0","_shasum":"ff89e3c051b411fd3632b414a6a8988bb6d057aa","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"ff89e3c051b411fd3632b414a6a8988bb6d057aa","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.3.0.tgz","integrity":"sha512-oeIyM9mpMU34J8OFEAfresvIaou/Uk5byP306jwzy+dLf9GU6i8QZ0W+cjCoVCNC/plaJnSCQdnLSUbXq0uUJA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5eXhVdKmnenNnlajkKVDhUd0OPjGWnhmiADx660nKGAiA8IBdSdqjXZorAYPlaDtwo5eIiSSon+svcJQevRnYFrw=="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.3.0.tgz_1475598818522_0.7830725195817649"},"directories":{}},"1.3.1":{"name":"react-media","version":"1.3.1","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","scripts":{"build":"node ./scripts/build.js","build-lib":"babel ./modules -d . --ignore '__tests__'","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-dev-expression":"^0.2.1","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^8.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","json2mq":"^0.2.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^4.0.2","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"f4d585452be2e948b42420c3c35a703d4357cb3a","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.3.1","_shasum":"fba295a4f7eb8782a7701f0d2faa720667292173","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"fba295a4f7eb8782a7701f0d2faa720667292173","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.3.1.tgz","integrity":"sha512-6NQiCFZrQmykBzEbKNUgV1DSkdjx2dj4LRaEGnOorLAvZhXuizTitdCDiEjkMmgKAzTibPcQt5x1bjHxOGNBSQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9b/1gmTPGJitr/K4ew8quJeMqMfj0FgCy24zqBVHmUwIgePp2B/csPbEtZnB6YPJgt4m6sfTeSfgN3l/0tGTHmSw="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.3.1.tgz_1475599040638_0.14433034812100232"},"directories":{}},"1.3.2":{"name":"react-media","version":"1.3.2","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","scripts":{"build":"node ./scripts/build.js","build-lib":"babel ./modules -d . --ignore '__tests__'","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-dev-expression":"^0.2.1","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^8.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^4.0.2","react":"^15.3.0","react-dom":"^15.3.0","readline-sync":"^1.4.4","webpack":"^1.13.1"},"dependencies":{"json2mq":"^0.2.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"8145d85c7fa964adfd0b59b8292092e98c2dc5f6","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.3.2","_shasum":"f33269949d5103149afd91df717eb2976eaf83ab","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"f33269949d5103149afd91df717eb2976eaf83ab","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.3.2.tgz","integrity":"sha512-vy8AVASZuekwpFckh/hAyx+jMDsCL+S6jkeX9crJi3KFe+DHkU36RCIY0MiApIr+Sg/Jo+7ZYix8ExCbtDa18A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBadwm1ng1YBcrsHfiymwLkgxrfducXAjGrcdOSVTuqcAiEAlQ0HpCYufFv7OBW5tzo2CT571flASiWBe6PVS5Yl6YY="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-media-1.3.2.tgz_1476122237675_0.8140425463207066"},"directories":{}},"1.4.0":{"name":"react-media","version":"1.4.0","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"author":{"name":"Michael Jackson"},"license":"MIT","scripts":{"build":"node ./scripts/build.js","build-lib":"babel ./modules -d . --ignore '__tests__'","build-umd":"webpack modules/index.js umd/react-media.js","build-min":"webpack -p modules/index.js umd/react-media.min.js","release":"node ./scripts/release.js","prepublish":"node ./scripts/build.js","lint":"eslint modules","test":"npm run lint && karma start"},"peerDependencies":{"react":"15.x || ^0.14.7 "},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-dev-expression":"^0.2.1","babel-preset-es2015":"^6.9.0","babel-preset-es2015-loose":"^8.0.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^1.7.0","mocha":"^3.0.0","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","readline-sync":"^1.4.4","webpack":"^1.13.1"},"dependencies":{"json2mq":"^0.2.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"168094b57a9b00edaa851c5df2befc46b22ae25e","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.4.0","_shasum":"fe2f1f7450d0b08e3cd04b19b21eb71bef64ce98","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"fe2f1f7450d0b08e3cd04b19b21eb71bef64ce98","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.4.0.tgz","integrity":"sha512-7s9Cp/USX7Hv5NwCrK4GLRQR6QMgNUIVIgWTQJIUwbm25c4g2rdxf/7Qeh52Iv/JEKCvBtzKZ+t0SNe8lGcEEg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCv7QwTv5mqHA17TlWOAo1DPI0RXuaCbpbBYVlGNx2gRwIhAPrGuRBqRDeyyRnI+TsrPcwBsyLRHlPnIZEvwXeDmxv5"}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.4.0.tgz_1481732781241_0.1783013534732163"},"directories":{}},"1.5.0":{"name":"react-media","version":"1.5.0","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"scripts":{"build":"node ./tools/build.js","clean":"git clean -e '!node_modules' -fdX .","prepublish":"node ./tools/build.js","release":"node ./tools/release.js","lint":"eslint modules","test":"karma start --single-run"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"json2mq":"^0.2.0"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-transform-react-remove-prop-types":"^0.3.2","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.1","mocha":"^3.0.0","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","readline-sync":"^1.4.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"fc3e4b6634c1b8186720604235a9e2566b445966","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.5.0","_shasum":"d0c2c599405c79fc690e13b1fd934aa65ea8bc55","_from":".","_npmVersion":"4.0.5","_nodeVersion":"6.6.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"d0c2c599405c79fc690e13b1fd934aa65ea8bc55","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.5.0.tgz","integrity":"sha512-PP6dTXrDIbK0In0T/cLqSBhw5aiivabT9a4FRYLShCPLYuZCoUVNLDidTz90coZXNS+24FDDyP/ypS0ahN0uaw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFH5wZRJW7pKpRp3DdKnFXBprHu6hIZS5FZ0fJBVYjuqAiAwfD2Wg3P8tc2ckA5RzEZ6UHMu3gLaPnhK7aYbicEH/g=="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-media-1.5.0.tgz_1487377334694_0.9211435837205499"},"directories":{}},"1.5.1":{"name":"react-media","version":"1.5.1","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"files":["Media.js","README.md","es","index.js","umd"],"scripts":{"build":"node ./tools/build.js","clean":"git clean -e '!node_modules' -fdX .","prepublish":"node ./tools/build.js","release":"node ./tools/release.js","lint":"eslint modules","test":"karma start --single-run"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"json2mq":"^0.2.0"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-transform-react-remove-prop-types":"^0.3.2","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.1","mocha":"^3.0.0","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","readline-sync":"^1.4.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"2124c1e0554f7d1f4067b849134fe4c3925962d8","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.5.1","_shasum":"dbb60f4f89fa2735b837d78d13d7ec0172429a6c","_from":".","_npmVersion":"4.0.5","_nodeVersion":"6.6.0","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"dbb60f4f89fa2735b837d78d13d7ec0172429a6c","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.5.1.tgz","integrity":"sha512-XvMUUd8zmLichs4Ht6c/UTRpK/lcm6oCwSPBkXzPtig+GCRs1PpZ7/KyVQUfPio2FaxrGQd88V4pESZvR0cIQw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHohzgiOWQsQN4y9IWLBjLt1f4w339PIKB4sfplteJyeAiAeUEY9SzjgbrDb+fCJ0amNWggP1V7cB0oPNRH+1GgGAw=="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-media-1.5.1.tgz_1487377496600_0.1882092277519405"},"directories":{}},"1.6.0":{"name":"react-media","version":"1.6.0","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"files":["Media.js","es","index.js","umd"],"scripts":{"build":"node ./tools/build.js","clean":"git clean -fdX .","prepublish":"node ./tools/build.js","release":"node ./tools/release.js","lint":"eslint modules","test":"karma start --single-run"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"json2mq":"^0.2.0"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-transform-react-remove-prop-types":"^0.3.2","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-react":"^6.0.0","expect":"^1.20.2","gzip-size":"^3.0.0","in-publish":"^2.0.0","karma":"^1.2.0","karma-browserstack-launcher":"^1.0.1","karma-chrome-launcher":"^1.0.1","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.1.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.1","mocha":"^3.0.0","pretty-bytes":"^4.0.2","prop-types":"^15.5.10","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","readline-sync":"^1.4.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"a71b12658d9ab62c99fb09ebf8e17673d2667291","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.6.0","_shasum":"2e6f687a1a3ae8da1d71ad26f3b2ac53d6896ec7","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.1","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"2e6f687a1a3ae8da1d71ad26f3b2ac53d6896ec7","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.6.0.tgz","integrity":"sha512-++ztRMSlM1NKFg3aJdazESRYp0WturhEBpm67crvRkCQhzM45jpPzkQtKLfZKJ+ebCE6y9WAGxMZtJY8AQtROg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCISwXxjaVULq3OUPYNr1t79CXjhl/lCFg9jcnFve7ipQIhAP9D2LijnZkzEHxJqOsOAwPQBDaY8EXz73DLiKv3RpO9"}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-1.6.0.tgz_1499758753735_0.6207159461919218"},"directories":{}},"1.6.1":{"name":"react-media","version":"1.6.1","description":"A CSS media query component for React","repository":{"type":"git","url":"git+https://github.com/reacttraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"files":["Media.js","es","index.js","umd"],"scripts":{"build":"node ./tools/build.js","clean":"git clean -fdX .","prepublish":"node ./tools/build.js","release":"node ./tools/release.js","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"babel-cli":"^6.11.4","babel-eslint":"^7.0.0","babel-loader":"^6.2.4","babel-plugin-transform-react-remove-prop-types":"^0.3.2","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-jest":"^20.0.3","eslint-plugin-react":"^6.0.0","gzip-size":"^3.0.0","in-publish":"^2.0.0","jest":"^20.0.4","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","readline-sync":"^1.4.4","webpack":"^1.13.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"3041f6908948851895c8dd8d1cb999856acd928f","bugs":{"url":"https://github.com/reacttraining/react-media/issues"},"homepage":"https://github.com/reacttraining/react-media#readme","_id":"react-media@1.6.1","_shasum":"84e7986a92356b106dca026363f8f5c88054fe72","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.1","_npmUser":{"name":"mjackson","email":"mjijackson@gmail.com"},"dist":{"shasum":"84e7986a92356b106dca026363f8f5c88054fe72","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.6.1.tgz","integrity":"sha512-9o/YbWpXdNE4oq8sC3z9vLpwxhwimlCWsTWaSFD19ZxWXa6x1aOVOspUxQRZmNh1uWUPKmgJ6K3cdWXbuuQ8wQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJSdTyCIWxGjOHB0kTww5vK3fAWgN5g0+8pSswDpSyZgIhANM5daQffXdmosiIY4kbEmmuue8/dPM5Wd2GFLNbIRWy"}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-1.6.1.tgz_1500009081684_0.3351399071980268"},"directories":{}},"1.8.0-rc.1":{"name":"react-media","version":"1.8.0-rc.1","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"files":["cjs","esm","umd"],"main":"cjs/react-media.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","scripts":{"build":"node ./scripts/build.js","prepublishOnly":"node ./scripts/build.js","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^7.0.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-jest":"^20.0.3","eslint-plugin-react":"^6.0.0","gzip-size":"^3.0.0","jest":"^20.0.4","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.53.4","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^2.0.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"9d96989c845d51902dd45fd3c5dfb950cbafdff4","readme":"# react-media [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-media\n[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-media\n\n[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.\n\nA `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.\n\n## Installation\n\nUsing npm:\n\n    $ npm install --save react-media\n\nThen, use as you would anything else:\n\n```js\n// using ES modules\nimport Media from \"react-media\";\n\n// using CommonJS modules\nvar Media = require(\"react-media\");\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-media/umd/react-media.min.js\"></script>\n```\n\nYou can find the library on `window.ReactMedia`.\n\n## Usage\n\nRender a `<Media>` component with a `query` prop whose value is a valid [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). The `children` prop should be a function whose only argument will be a boolean flag that indicates whether the media query matches or not.\n\n```jsx\nimport React from \"react\";\nimport Media from \"react-media\";\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nIf you render a `<Media>` component on the server, it always matches.\n\nIf you use a regular React element as `children` (i.e. `<Media><SomethingHere/></Media>`) it will be rendered if the query matches. However, _you may end up creating a bunch of elements that won't ever actually be rendered to the page_ (i.e. you'll do a lot of unnecessary `createElement`s on each `render`). Thus, a `children` **function** (i.e. `<Media>{matches => ...}</Media>`) is the preferred API. Then you can decide in the callback which elements to create based on the result of the query.\n\nFor the common case of \"only render something when the media query matches\", you can use a `render` prop that is only called if the query matches.\n\n```jsx\nimport React from \"react\";\nimport Media from \"react-media\";\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media\n          query=\"(max-width: 599px)\"\n          render={() => <p>The document is less than 600px wide.</p>}\n        />\n      </div>\n    );\n  }\n}\n```\n\nThe `render` prop is never called if the query does not match.\n\n`<Media query>` also accepts an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from \"react\";\nimport Media from \"react-media\";\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query={{ maxWidth: 599 }}>\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\nAn optional `targetWindow` prop can be specified if you want the `query` to be evaluated against a different window object than the one the code is running in. This can be useful for example if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).\n\nIf you're curious about how react-media differs from [react-responsive](https://github.com/contra/react-responsive), please see [this comment](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260).\n\nEnjoy!\n\n## About\n\n`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.8.0-rc.1","_npmVersion":"5.6.0","_nodeVersion":"9.5.0","_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"dist":{"integrity":"sha512-HZwLwGO0rtFFWKQVcVAF4F5IvPLlYyZ5Tiu4ycb0HFOYoAZq0R13jFNUJSRiD8X0yK8HcSkGiwtphNoP4H6IWA==","shasum":"cee1924bebab2eb9f1708b80ee6af2a1f9a0b19e","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.8.0-rc.1.tgz","fileCount":8,"unpackedSize":123222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjeJxd+RI5D1enoomz5Z9ix8Zz+lCOw0X/K2WWofYl7AIgNeq0xqAuBfO94NsVRLu6zJOl50IU+9ob9t2XK43T/OA="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.8.0-rc.1_1518067756255_0.18895661154949517"},"_hasShrinkwrap":false},"1.8.0":{"name":"react-media","version":"1.8.0","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"files":["cjs","esm","umd"],"main":"cjs/react-media.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","scripts":{"build":"node ./scripts/build.js","prepublishOnly":"node ./scripts/build.js","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^7.0.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^3.2.2","eslint-plugin-import":"^2.0.0","eslint-plugin-jest":"^20.0.3","eslint-plugin-react":"^6.0.0","gzip-size":"^3.0.0","jest":"^20.0.4","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.53.4","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^2.0.1"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"678f78cec7692b750480c99c36829012e2816456","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.8.0","_npmVersion":"5.6.0","_nodeVersion":"9.5.0","_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"dist":{"integrity":"sha512-XcfqkDQj5/hmJod/kXUAZljJyMVkWrBWOkzwynAR8BXOGlbFLGBwezM0jQHtp2BrSymhf14/XrQrb3gGBnGK4g==","shasum":"b86d6d62313f95d53af7d06e23d4f49adfb131d3","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.8.0.tgz","fileCount":8,"unpackedSize":123217,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMoLSoAVStChOhm8Bm2RsAUSALO9P1w77rIcgka3a2hwIhAMGPkIKleqdtML7znwlsp3BpByFU5AuV46a/7NErbMRF"}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.8.0_1518114904405_0.38198688128872016"},"_hasShrinkwrap":false},"1.9.0":{"name":"react-media","version":"1.9.0","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.1.5","@types/react":"*","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"4a6483aa2aae2787b439dab5384444889ac8cec5","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.9.0","_npmVersion":"6.4.1","_nodeVersion":"11.4.0","_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"dist":{"integrity":"sha512-BxP1sX/uT1gvmWDRpBfJGGG88DvIeHB4hS7o9SxM9UcD7duhc8LQ7OfLQvwch0SMEQIRgZkwdBLMOoULrURjwA==","shasum":"89317b19cf3d3c7fc5e0592af67b6d7d8b4d808b","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.9.0.tgz","fileCount":11,"unpackedSize":61771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEOW3CRA9TVsSAnZWagAARfwP/2nRyuA72ChHTM/vPAD7\n2ZH69Qo2g8p02KSkpiD6oCVJ1ZoHLQ8S+KegCgtqiX9ZgXz89k1BOsaAqM+N\n+bznJP21EdxiOEZ6CAy7lW7XA/h2K+cywzp8golOZDxVeDgdg5Gh6i2axeOh\nAUidN9PCO1R9hZBxxwEjmLIUYlkxNx+rRhKBBJdxMuPAVC8abk+ABD1oHcrE\nuc+AusIuVAsVMnGOxbndP3woZT2LQcOr5hIkO1c7vlBKQhZ8IfZ36IuA0XdP\neq/EbA0KuQ7Qa7oWbv3eDIRKEYcECUef/IUxh9flrdA+OoWt11WQBM8YABO0\n/N0FOoshGUqde5+3bhBRtsMhF34ypCVB7AaROUZmZoFyD0lENGMu8YfOcfDs\nqCpJRbWaFjNNO9xaOaTj+MprT1LB24qLNX4Ufxqvs7fv2xtTYjU042yBEfUc\nVMwmMqahfXrwgYHFp83UXcb3IkxbK+ATG23pEIV9ZIQ7ZjK650byRvAFasOf\nGD3IhP6ki8pobMg9AGVBloqNu6W2CdKrk2b7SaWEGXzYpu6OnJEAUYgFJUXw\nEOlPcG/QSfY2t/H59rU1OtCb8X9PZJa+HLclENvNg9f78NDgyXJeWmlK3/B4\n/xPRlhpolOpqX/Xx+HZ+78bkA5cYtP8EoL4OWoRM71Jbz1fIPYUpYXhMQC7q\ny/FP\r\n=mILh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwlkcc+HRpPkxzGJbUbzbfZodrL619FppmabphZv90GAiEA20Je1lZKUj6sD8qi4IQXjl21CVyxgWt+N3kNpTbOGcg="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.9.0_1544611255406_0.7690749802991586"},"_hasShrinkwrap":false},"1.9.1":{"name":"react-media","version":"1.9.1","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.1.5","@types/react":"*","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-transform-react-remove-prop-types":"^0.4.21","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"291d4df36eda025dfba8f1df041c21d76f0cd1f4","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.9.1","_npmVersion":"6.4.1","_nodeVersion":"11.4.0","_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"dist":{"integrity":"sha512-UHfu+sDcYLPIKBAu2uEDPa2xzNcF8Yfp56sgXocK/1yzLD23mwEIgbk3FN38PZco90/x9w3HqYFFKLDew2RMug==","shasum":"ff137af610ac73c36a846ed7bdda6172cdbe212b","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.9.1.tgz","fileCount":11,"unpackedSize":59562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEReXCRA9TVsSAnZWagAA8zsP/2+3sRESr02XOw8dY22F\ndH21t/CmvvAG51k9x19yKwz6boCAG/Dse6+cIDBDkdPE/l17Ir3YIOUb+Bxx\nLKHupB2X70K9dEaDZKNIRPTNpDtL2pJFXZCHvTJuhxiggb5XFZH9t/tTdqNU\n60XKx7hSHrGu47uUFkYDeReTD51lBJTO0v8pBuJezyfuTmbJQVFEDJ0JEtW9\nH0BIKCt86dV//vgoryYOOwyyc5tmvS6SMN//lP72L3U9tJpA3IBeS8gRRFTM\nqACRL4AQUcMWoynMZLvKfQmSPowWsozfgWURczzQZzKMZx4WsZeodbM8i2js\nKwf+o/DqyLCGsU+n4sLko6Sd6lvKhCY55qonEyvlTfYj7ix3EtOcpxOzDUVZ\nS9ROwjb8X/uJOT8+m75V8NPsuamTW3I0AkuW5MaQ4oZbVxfXPzJNpQ+JM48h\n+iPHFeGZ49vmiAUBDfpTlJsxPZVZZoUZ9B8wMIi9gN429xZ5fz26+uO2R1E+\nuK7zChOACGjzZlFbQx9kZR9HpT+IKYbMETObDiQLe0gFvjjHAeE3t/58DTXO\nTliwmSy8SWWKlQzNt5qBQD/ALs3gU1lph3n3/J+XvwtZRe6jalfYSqbNpRH3\nc8RIGLvyNKD5ROtdxItM0cez+xWae1BzIvK7BD8/Do2hy5hORjI7pTM5KtQS\nCqZ2\r\n=1VOf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtoF1uMCWak48FloS6tN9t6TBBO62pVEZvNmZTbw8bnAiEAtiL9GxAWLPs0rD9HaSaB11ZJSYfUQLy4YK7P8keOqyc="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.9.1_1544624022853_0.07498046088144861"},"_hasShrinkwrap":false},"1.9.2":{"name":"react-media","version":"1.9.2","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"@babel/runtime":"^7.2.0","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"0595c994b81b967c82982b0ed901a97cea77e4ad","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.9.2","_npmVersion":"6.4.1","_nodeVersion":"11.4.0","_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"dist":{"integrity":"sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==","shasum":"423ee12f952e1d69f1b994a58d3cbed21a92b370","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.9.2.tgz","fileCount":11,"unpackedSize":61199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEVV6CRA9TVsSAnZWagAAPrIQAIGEtz03vGUNKNbjPEnB\nJ2OXpDMeojgcHomLPilR84SpfXHjdVQEgJUDi3GUwtEbIQKMhG0mLJgGT22/\nX3Mt6cr2qkNtOFuDDA1IyuKF+KR5b4Cxos0jnE0xf95Z+6Mk4L6wBIedR6NX\nQb2FsesoB+WuB/EINX+qMn6gL0MZmXQFP3YJAigF0FXkMZON2yBbRkB+Olby\nYBT8Jjmq7gNDRH/2ykUp6QgBQMipm6N3oDdAFkrJ0Mcb6+s81Upy25703mBu\n87jUFcixTU4gMFoTLZvAiBILxTOKPctSBGRHFzgLugeuwzgBxvbJekqGiPB3\nchAyoBmgk6e5rXMy+s1qNq+lySvX6V+xzjlfbXN9/Q0ERJJu56gysny8E6LR\n9+6ybx7uHNzjLrtdcnznbCtlGD2nwTPR4kgfeXRbpqndXaYN6doKlY/HJc+0\nXa+/GWjQ2M1K0OnsU2gvUmLgp3zQEdzzMt8RsuxFmjGqI7bt0oiDRQksono9\nYnRZfjgNx26sV4SjkGEp3oxF1sCGDJ0GQ6hwVJ/WMGP7u+Wd0d67ZNJ6+viY\neeDtwxds6XjAu32ir43Juazx1UFJhg5TA9Lyp/Gs3uHHXeCXzM0HBwm9jhzf\nl1R//nBqENMNTC8hcgBPM19brLOgZ7rgU3UZfJmPG6vcGYZ2fTxh1J8BalQN\n9vb4\r\n=ACi+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvXPGqjilLqHBwocQDRBV1lfvB1P4oEQ4/XmdHO9yaMAiEAvxcPQuu6CV+mRJts9r80TCWKHRI65zr34yMhl2SrVZg="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.9.2_1544639865808_0.9192392171426231"},"_hasShrinkwrap":false},"2.0.0-alpha.1":{"name":"react-media","version":"2.0.0-alpha.1","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"@babel/runtime":"^7.2.0","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","gzip-size":"^3.0.0","jest":"^23.6.0","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"25981eb699e392d29bd0e184753e95b4b8066806","readme":"# react-media [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-media\n[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-media\n\n[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.\n\nA `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.\n\n## Installation\n\nUsing npm:\n\n    $ npm install --save react-media\n\nThen, use as you would anything else:\n\n```js\n// using ES modules\nimport Media from 'react-media';\n\n// using CommonJS modules\nvar Media = require('react-media');\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-media\"></script>\n```\n\nYou can find the library on `window.ReactMedia`.\n\n## Basic usage\n\nRender a `<Media>` component with a `query` prop whose value is a valid [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). The `children` prop should be a function whose only argument will be a boolean flag that indicates whether the media query matches or not.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\n## Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when the query matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media query=\"...\" render={() => <p>I matched!</p>} />`|\n|children (function)|Receives a single boolean element, indicating whether the media query matched. Use this prop if you need to render something when the query doesn't match.|`<Media query=\"...\">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when the query matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the query matches or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media query=\"...\"><p>I matched!</p></Media>`|\n\n## `query`\n\nIn addition to passing a valid media query string, the `query` prop will also accept an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media query={{ maxWidth: 599 }}>\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n## `onChange`\n\nYou can specify an optional `onChange` prop, which is a callback function that will be invoked when the status of the media query changes. This can be useful for triggering side effects, independent of the render lifecycle.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media\n          query=\"(max-width: 599px)\"\n          onChange={matches =>\n            matches\n              ? alert('The document is less than 600px wide.')\n              : alert('The document is at least 600px wide.')\n          }\n        />\n      </div>\n    );\n  }\n}\n```\n\n### Server-side rendering (SSR)\n\nIf you render a `<Media>` component on the server, it will match by default. You can override the default behavior by setting the `defaultMatches` prop.\n\nWhen rendering on the server you can use the `defaultMatches` prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device [by analyzing the user-agent string](https://github.com/ReactTraining/react-media/pull/50#issuecomment-415700905) from the HTTP request in your server-side rendering code.\n\n```js\ninitialState = {\n  device: 'mobile' // add your own guessing logic here, based on user-agent for example\n};\n\n<div>\n  <Media\n    query=\"(max-width: 500px)\"\n    defaultMatches={state.device === 'mobile'}\n    render={() => <Text>Render me below medium breakpoint.</Text>}\n  />\n\n  <Media\n    query=\"(min-width: 501px)\"\n    defaultMatches={state.device === 'desktop'}\n    render={() => <Text>Render me above medium breakpoint.</Text>}\n  />\n</div>;\n```\n\n## `targetWindow`\n\nAn optional `targetWindow` prop can be specified if you want the `query` to be evaluated against a different window object than the one the code is running in. This can be useful if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202). See [this PR thread](https://github.com/ReactTraining/react-media/pull/78) for context.\n\n## Compared to react-responsive\n\nIf you're curious about how react-media differs from [react-responsive](https://github.com/contra/react-responsive), please see [this comment](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260).\n\n## About\n\n`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@2.0.0-alpha.1","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-21lzOF3Og8IFESSVNcvaFVR3IFSlNXxihZpf7UBwJeak67NIs2JqkiddLSA0LCBFWwb0K+WDJbyKkHBm0g26kQ==","shasum":"4fa88cde7285611a06ad92b667569af6041acb32","tarball":"https://registry.npmjs.org/react-media/-/react-media-2.0.0-alpha.1.tgz","fileCount":11,"unpackedSize":71498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjLuyCRA9TVsSAnZWagAABZ4QAJsGU3LfMjobfhVgZhDF\noXQZx1Vbd2Lk3dpTc0fRSgYR19GCUDh1hd/Go0CmbC+fdBmLyuYs+SRH90fg\nb6whHYY6JmJ71/LTthkhAgD60tt9kKWbU7ZyfnZZwtatAUnAtRfdWmwJyjGR\nnVi3UFkzosC7r5fRfNUXPgzpiGMMIeNl1SYyUsN2toDAJwSxCdEO4HwokOB0\nRRoJUr5W6k1OCLRBhj/B+XLiE6Y6oAF/Dj4kir3Lr5q36yX1KR20KpHl5P1a\nTHsJZlXfX41t8VXC6KSEoRU1N3T939CkRiOo96gcVMrWaOhTCpQsbOh6rM22\npzjUwAnKNyL0xExNlWjz4AHd/+WiA8O+JtFVyxauAkZeRFSG94PNCEIIOMgW\ndPplE+4wpg/gzhiQ5YUKxnvZm3aund4Nz6cNjo+clC9ybchxCxaEUKYjllD2\nYZDU4cCj3PR8YhwjbWoXpu+3KSmz/Lxx4XeDzQQdTQPbazeKyQB8+vTuIapU\n1y/2PWY/sxPxWEadxNb/gBMP2lXMzIirNjX9pxsyH+NMWUoVHts4HHHDio4O\nPRJfsHHCfZyITDcwjz11cPF3pVo2Pgqcnbrg54JpYFPIn4itz0CzuwqxWLaZ\nC+lkLBOtXDO5DwQZ/pF+i38zVcQMpMx6LAlYXB394IWl5DyMXrFVUpCjHW0p\nL0x9\r\n=CatO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOdTOTuefTQi/4UGSlidyqXyk8X4Z1HFSe/AWIUrv/tAIhAJdCB/ApvkoLvsSuRAIPVOjm29DAlKwm41XpwIwIGp0d"}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_2.0.0-alpha.1_1552726961625_0.3444744402187947"},"_hasShrinkwrap":false},"2.0.1-alpha.0":{"name":"react-media","version":"2.0.1-alpha.0","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"@babel/runtime":"^7.2.0","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","gzip-size":"^3.0.0","jest":"^23.6.0","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"16c31293c3b76add2420d24a5c8a5b1403cb73f4","readme":"# react-media [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-media\n[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-media\n\n[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.\n\nA `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.\n\n## Installation\n\nUsing npm:\n\n    $ npm install --save react-media\n\nThen, use as you would anything else:\n\n```js\n// using ES modules\nimport Media from 'react-media';\n\n// using CommonJS modules\nvar Media = require('react-media');\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-media\"></script>\n```\n\nYou can find the library on `window.ReactMedia`.\n\n## Basic usage\n\nRender a `<Media>` component with a `query` prop whose value is a valid [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). The `children` prop should be a function whose only argument will be a boolean flag that indicates whether the media query matches or not.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\n## Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when the query matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media query=\"...\" render={() => <p>I matched!</p>} />`|\n|children (function)|Receives a single boolean element, indicating whether the media query matched. Use this prop if you need to render something when the query doesn't match.|`<Media query=\"...\">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when the query matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the query matches or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media query=\"...\"><p>I matched!</p></Media>`|\n\n## `query`\n\nIn addition to passing a valid media query string, the `query` prop will also accept an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media query={{ maxWidth: 599 }}>\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n## `onChange`\n\nYou can specify an optional `onChange` prop, which is a callback function that will be invoked when the status of the media query changes. This can be useful for triggering side effects, independent of the render lifecycle.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media\n          query=\"(max-width: 599px)\"\n          onChange={matches =>\n            matches\n              ? alert('The document is less than 600px wide.')\n              : alert('The document is at least 600px wide.')\n          }\n        />\n      </div>\n    );\n  }\n}\n```\n\n### Server-side rendering (SSR)\n\nIf you render a `<Media>` component on the server, it will match by default. You can override the default behavior by setting the `defaultMatches` prop.\n\nWhen rendering on the server you can use the `defaultMatches` prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device [by analyzing the user-agent string](https://github.com/ReactTraining/react-media/pull/50#issuecomment-415700905) from the HTTP request in your server-side rendering code.\n\n```js\ninitialState = {\n  device: 'mobile' // add your own guessing logic here, based on user-agent for example\n};\n\n<div>\n  <Media\n    query=\"(max-width: 500px)\"\n    defaultMatches={state.device === 'mobile'}\n    render={() => <Text>Render me below medium breakpoint.</Text>}\n  />\n\n  <Media\n    query=\"(min-width: 501px)\"\n    defaultMatches={state.device === 'desktop'}\n    render={() => <Text>Render me above medium breakpoint.</Text>}\n  />\n</div>;\n```\n\n## `targetWindow`\n\nAn optional `targetWindow` prop can be specified if you want the `query` to be evaluated against a different window object than the one the code is running in. This can be useful if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202). See [this PR thread](https://github.com/ReactTraining/react-media/pull/78) for context.\n\n## Compared to react-responsive\n\nIf you're curious about how react-media differs from [react-responsive](https://github.com/contra/react-responsive), please see [this comment](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260).\n\n## About\n\n`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@2.0.1-alpha.0","_nodeVersion":"11.13.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-IcT8qu/N0M0qF6KF6prtyLUhmAjzFVAXVUQ1JusoERju/0+2R5O4dDswAalYbEoVh6Xs+JDgZbKXdnt3MpHjWQ==","shasum":"9eb4f5c49f40aa95606f4b2a0bff7060efbfc613","tarball":"https://registry.npmjs.org/react-media/-/react-media-2.0.1-alpha.0.tgz","fileCount":11,"unpackedSize":71498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpHX2CRA9TVsSAnZWagAAOe4P+wRcQw3mXRxHUDTLn78q\n4Sm0auG6aPvm1vUtBhhn8t3VZCnBmKqYNIbFaIwHo9kdBDIMRXOjJR5Lgkfn\nh8YfDG1pfKKFU8nCAkgKh+m6ix9gE3SLyEI8NqvVdiUMCSJQkmJtlsZpZk/N\n4IMDsAwQ5t2ggAruE6FpBwly6CG2DXXRcwPX2rQDwnmbzDL0XuqR8YMladiR\nDbiTHuRuVXh8SyzFZhT2FoUnR07IzpA2xKJX2q+Cuva6n5q1fCcieIw8rfjw\nvKyme7+sgqxRFqcPODSoYPLCjeRISGawZk8CChe9/4L3VuNHRW2ZN+VneyWO\nAptj6jYwr+K/vSS/mGK/x1oRldsXsVp8KzuooQliplAflzt2+1NVrl0nZucT\ntP0eQmlYJCAEvgryI07fTHGeAsB94MH1qNUz+NrmYkLfQwXDtc8YXIFtIe2Z\nZKLVjaz0PTOo32uTx345nepX5ylbbVuZrY77A6tg/Y2xcbbqOYEWOgAFmXsy\naAP4Sh9XaX5cSLC3hUo+9qIh+Wpl1ZFbK8tU5vPlZWK2FKtfXo4ZvYN/H4Q9\nw9eDLkT25BI/nFtApWFmdOhmhruocB/9DqM7mYnf7Ft4BH70DorCTbqHyU5M\npbk5NzoHfrvYqwNH0wNozIsPZJ7+I1PxZhubeqo3ZG0PztWuFCFA0Dpx0uzg\n1fLo\r\n=SchG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnnVljVYNdw/Wf35zyJ5WrSiEpFVy8qoAa4adUsuAEaAiAEFyWO9+UTPLCE6bhZXCNlLjd1BDRnamyO2Tyozw2/wg=="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_2.0.1-alpha.0_1554281973593_0.912925318246216"},"_hasShrinkwrap":false},"1.10.0-alpha.0":{"name":"react-media","version":"1.10.0-alpha.0","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"@babel/runtime":"^7.2.0","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","gzip-size":"^3.0.0","jest":"^23.6.0","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"17a1da8899ab09d6e0a51ced8a46137841b6fe15","readme":"# react-media [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-media\n[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-media\n\n[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.\n\nA `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.\n\n## Installation\n\nUsing npm:\n\n    $ npm install --save react-media\n\nThen, use as you would anything else:\n\n```js\n// using ES modules\nimport Media from 'react-media';\n\n// using CommonJS modules\nvar Media = require('react-media');\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-media\"></script>\n```\n\nYou can find the library on `window.ReactMedia`.\n\n## Basic usage\n\n### queries\n\nRender a `<Media>` component with a `queries` prop whose value is an object,\nwhere each value is a valid\n[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries).\nThe `children` prop should be a function whose argument will be an object with the\nsame keys as your `queries` object, and whose values are booleans indicating whether\neach query matches.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media queries={{\n          small: \"(max-width: 599px)\",\n          medium: \"(min-width: 600px) and (max-width: 1199px)\",\n          large: \"(min-width: 1200px)\"\n        }}>\n          {matches => (\n            <Fragment>\n              {matches.small && <p>I am small!</p>}\n              {matches.medium && <p>I am medium!</p>}\n              {matches.large && <p>I am large!</p>}\n            </Fragment>\n          )}\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\n### query\n\nAlternatively, if you only need to match against a single media query, the `query` prop provides a less-verbose approach.\nMore documentation about the difference betwen `query` and `queries` can be found below.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query=\"(max-width: 599px)\" render={() =>\n          (\n            <p>I am small!</p>\n          )}\n        />\n      </div>\n    );\n  }\n}\n```\n\n## `query` vs `queries`\n\nThe `queries` prop was added to allow for multiple media queries to be matched without excessive nesting or other\nworkarounds. The `query` prop was retained out of recognition that a single query covers many use cases, and there\nis already a lot of usage that would be a pain to migrate.\n\nThe salient points:\n\n* **You cannot use them together**: if you do, the component will throw an error. This is to avoid confusion around\nprecedence.\n* **The render methods differ slightly**: for the `queries` prop, the `render` and child JSX methods will render if\n**at least one** of the given queries is matched. The `query` prop renders if the given query matches.\n\n\n## `queries`\n\nIn addition to passing a valid media query string, the `queries`\nprop will also accept an object of objects whose forms are similar to\n[React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html)\nin e.g. `<div style>`. These objects are converted to CSS\nmedia queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media queries={{ small: { maxWidth: 599 } }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media queries={{ small: \"(max-width: 599px)\" }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when **at least one** of the queries matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media queries={{ foo: ... }} render={() => <p>I matched!</p>} />`|\n|children (function)|Receives an object of booleans whose keys are the same as the `queries` prop, indicating whether each media query matched. Use this prop if you need to render different output for each of specified queries.|`<Media queries={{ foo: ... }}>{matches => matches.foo ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when **at least one** of the queries matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the queries match or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media queries={{ ... }}><p>I matched!</p></Media>`|\n\n## `query`\n\nIn addition to passing a valid media query string, the `query` prop will also accept an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media query={{ maxWidth: 599 }}>\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when the query matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media query=\"...\" render={() => <p>I matched!</p>} />`|\n|children (function)|Receives a single boolean element, indicating whether the media query matched. Use this prop if you need to render something when the query doesn't match.|`<Media query=\"...\">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when the query matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the query matches or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media query=\"...\"><p>I matched!</p></Media>`|\n\n## `onChange`\n\nYou can specify an optional `onChange` prop, which is a callback function that will be invoked when the status of the media queries changes. This can be useful for triggering side effects, independent of the render lifecycle.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media\n          query={{ small: \"(max-width: 599px)\" }}\n          onChange={matches =>\n            matches.small\n              ? alert('The document is less than 600px wide.')\n              : alert('The document is at least 600px wide.')\n          }\n        />\n      </div>\n    );\n  }\n}\n```\n\n### Server-side rendering (SSR)\n\nIf you render a `<Media>` component on the server, it will match by default. You can override the default behavior by setting the `defaultMatches` prop.\n\nWhen rendering on the server you can use the `defaultMatches` prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device [by analyzing the user-agent string](https://github.com/ReactTraining/react-media/pull/50#issuecomment-415700905) from the HTTP request in your server-side rendering code.\n\n```js\ninitialState = {\n  device: 'mobile' // add your own guessing logic here, based on user-agent for example\n};\n\n<div>\n  <Media\n    queries={{ medium: \"(max-width: 500px)\" }}\n    defaultMatches={{ medium: state.device === 'mobile' }}\n    render={() => <Text>Render me below medium breakpoint.</Text>}\n  />\n\n  <Media\n    queries={{ medium: \"(min-width: 501px)\" }}\n    defaultMatches={{ medium: state.device === 'desktop' }}\n    render={() => <Text>Render me above medium breakpoint.</Text>}\n  />\n</div>;\n```\n\n## `targetWindow`\n\nAn optional `targetWindow` prop can be specified if you want the `queries` to be evaluated against a different window object than the one the code is running in. This can be useful if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202). See [this PR thread](https://github.com/ReactTraining/react-media/pull/78) for context.\n\n## About\n\n`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.10.0-alpha.0","_nodeVersion":"11.13.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-bTWmGa6VGolhCpn73WJiLfjfRoUHn47zoQFcKCfF4dHblmkQ391itecHG34BMiqY6Kl3v7kNfpyyXtSRaMQshg==","shasum":"f0b7afeefc5895f8c3c0cec59c62ad9c3659dfc4","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.10.0-alpha.0.tgz","fileCount":11,"unpackedSize":82319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpHeECRA9TVsSAnZWagAAkT8P/0+sh4kITBFN+GowKmHR\n1oSQE6s3iXDCjj1odBk2gcTQCVGA3cTyTZH19oqTVtxsZFrZwloihSBqvsye\nZStoKWkWTSP5newpFjKqZ7WXxVJRvVxZTWdreJTf0bb1kReU0ZyXyB95gHw8\n+Oe/oGzcG09EQd/X+Nm/SFuFFaLZGuhkMCiCuzjLKd+T2JHbqzBlr9F5B8oF\nT0/6joLEVOxrfXyOUiyd+y5crrI5Ax4jfGlNB4xc8yJGl3wS9YWbWrCtGkrX\n/BQwvtpON5V8NFWyG71lkrCf0S0w1J1w9gaWKceF5t6lxwxaNhuE2lryAfKQ\nUaRsKyaC5b6ndpm5wNhJmZCcG8mnvodCXSBnBHeuMIOTbS4iNR6/Cr1bVwSd\nMZwB9rq/P0FqSRseHubSEepktLShwDElXe/DhLv5C738RVXac89oPh3e+eaa\n665vDJPGvX9306r4qaWU818Q3unARwcHqohaNpo2kc91H1oB7h06d+MCrnY+\ns17NJfMKEdxzaf+eDiCgMQIBfVi/TFb7tNvMr6JJhHSAv0IuU4WP0XjQqa0B\nsPhe/6j119IZYDEDLV5MOEIXJRF6YkySAl63aSS7ppmLuAGhxB1dOvfrwJz8\nu+bXw5k6owsAb+RCzfy7OVF6zWz0X4DY+exT80BjgMGkXEVEdrNRCAy2uHsg\nl/1T\r\n=r2sC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiDCdM3XN8QHMTPlS2AzLGrGJF3MbJA2l5+cesWG2iFQIgDIPgTnQtM6uHR08maIIbJqBWiOAD8D8Vaj/Am6JrhZU="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.10.0-alpha.0_1554282371773_0.6884636771335628"},"_hasShrinkwrap":false},"1.10.0-alpha.1":{"name":"react-media","version":"1.10.0-alpha.1","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest","testTypes":"tsc --noEmit --jsx react typeTest.tsx"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"@babel/runtime":"^7.2.0","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@types/react":"^16.8.18","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","gzip-size":"^3.0.0","jest":"^23.6.0","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0","typescript":"^3.4.5"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"5728ae78eb6e0c3fc8d38bef7d2303afd0a6bc09","readme":"# react-media [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-media\n[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-media\n\n[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.\n\nA `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.\n\n## Installation\n\nUsing npm:\n\n    $ npm install --save react-media\n\nThen, use as you would anything else:\n\n```js\n// using ES modules\nimport Media from 'react-media';\n\n// using CommonJS modules\nvar Media = require('react-media');\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-media\"></script>\n```\n\nYou can find the library on `window.ReactMedia`.\n\n## Basic usage\n\n### queries\n\nRender a `<Media>` component with a `queries` prop whose value is an object,\nwhere each value is a valid\n[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries).\nThe `children` prop should be a function whose argument will be an object with the\nsame keys as your `queries` object, and whose values are booleans indicating whether\neach query matches.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media queries={{\n          small: \"(max-width: 599px)\",\n          medium: \"(min-width: 600px) and (max-width: 1199px)\",\n          large: \"(min-width: 1200px)\"\n        }}>\n          {matches => (\n            <Fragment>\n              {matches.small && <p>I am small!</p>}\n              {matches.medium && <p>I am medium!</p>}\n              {matches.large && <p>I am large!</p>}\n            </Fragment>\n          )}\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\n### query\n\nAlternatively, if you only need to match against a single media query, the `query` prop provides a less-verbose approach.\nMore documentation about the difference betwen `query` and `queries` can be found below.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query=\"(max-width: 599px)\" render={() =>\n          (\n            <p>I am small!</p>\n          )}\n        />\n      </div>\n    );\n  }\n}\n```\n\n## `query` vs `queries`\n\nThe `queries` prop was added to allow for multiple media queries to be matched without excessive nesting or other\nworkarounds. The `query` prop was retained out of recognition that a single query covers many use cases, and there\nis already a lot of usage that would be a pain to migrate.\n\nThe salient points:\n\n* **You cannot use them together**: if you do, the component will throw an error. This is to avoid confusion around\nprecedence.\n* **The render methods differ slightly**: for the `queries` prop, the `render` and child JSX methods will render if\n**at least one** of the given queries is matched. The `query` prop renders if the given query matches.\n\n\n## `queries`\n\nIn addition to passing a valid media query string, the `queries`\nprop will also accept an object of objects whose forms are similar to\n[React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html)\nin e.g. `<div style>`. These objects are converted to CSS\nmedia queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media queries={{ small: { maxWidth: 599 } }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media queries={{ small: \"(max-width: 599px)\" }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when **at least one** of the queries matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media queries={{ foo: ... }} render={() => <p>I matched!</p>} />`|\n|children (function)|Receives an object of booleans whose keys are the same as the `queries` prop, indicating whether each media query matched. Use this prop if you need to render different output for each of specified queries.|`<Media queries={{ foo: ... }}>{matches => matches.foo ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when **at least one** of the queries matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the queries match or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media queries={{ ... }}><p>I matched!</p></Media>`|\n\n## `query`\n\nIn addition to passing a valid media query string, the `query` prop will also accept an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media query={{ maxWidth: 599 }}>\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when the query matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media query=\"...\" render={() => <p>I matched!</p>} />`|\n|children (function)|Receives a single boolean element, indicating whether the media query matched. Use this prop if you need to render something when the query doesn't match.|`<Media query=\"...\">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when the query matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the query matches or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media query=\"...\"><p>I matched!</p></Media>`|\n\n## `onChange`\n\nYou can specify an optional `onChange` prop, which is a callback function that will be invoked when the status of the media queries changes. This can be useful for triggering side effects, independent of the render lifecycle.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media\n          query={{ small: \"(max-width: 599px)\" }}\n          onChange={matches =>\n            matches.small\n              ? alert('The document is less than 600px wide.')\n              : alert('The document is at least 600px wide.')\n          }\n        />\n      </div>\n    );\n  }\n}\n```\n\n### Server-side rendering (SSR)\n\nIf you render a `<Media>` component on the server, it will match by default. You can override the default behavior by setting the `defaultMatches` prop.\n\nWhen rendering on the server you can use the `defaultMatches` prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device [by analyzing the user-agent string](https://github.com/ReactTraining/react-media/pull/50#issuecomment-415700905) from the HTTP request in your server-side rendering code.\n\n```js\ninitialState = {\n  device: 'mobile' // add your own guessing logic here, based on user-agent for example\n};\n\n<div>\n  <Media\n    queries={{ medium: \"(max-width: 500px)\" }}\n    defaultMatches={{ medium: state.device === 'mobile' }}\n    render={() => <Text>Render me below medium breakpoint.</Text>}\n  />\n\n  <Media\n    queries={{ medium: \"(min-width: 501px)\" }}\n    defaultMatches={{ medium: state.device === 'desktop' }}\n    render={() => <Text>Render me above medium breakpoint.</Text>}\n  />\n</div>;\n```\n\n## `targetWindow`\n\nAn optional `targetWindow` prop can be specified if you want the `queries` to be evaluated against a different window object than the one the code is running in. This can be useful if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202). See [this PR thread](https://github.com/ReactTraining/react-media/pull/78) for context.\n\n## About\n\n`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.10.0-alpha.1","_nodeVersion":"12.3.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-uoQqsOXIj85EPcysH9/dBwyQ8yHGF+0Mr+ZJfoMY0d4cm1kLI9K8hYyE8FeNJ92SFsdld50M+DJ0rs+ATKA+lQ==","shasum":"cad4f8ed9191732571a0aa2595998f3638a5e040","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.10.0-alpha.1.tgz","fileCount":11,"unpackedSize":83590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5n/oCRA9TVsSAnZWagAAfu4QAJK57OZE1ggpB2Sxasyw\nSC8CsyYwVtItb7vuaNJSTX3TLSLYsmU/d3Nmm6A7sfC2wByhwiBTDcgkwzZ0\nD9lLWVzKSnnR1T+tsqrFaYofa4fRaAjBPYp+IWH/ASmslf/ML20c6lk3NH5t\nnoM1ltLxgylvz5Ac7/B/fcK3bj08BmKNApMdt/uH8MEdqZS0NGB41w3w0TV2\nJtU6pxcCzEOg/28QXJ4zDsAs0R8vcGPf4hQdrCqj4MVAw1XcSepqRkm2Mzsv\nv+/WBG+PKEVbo5BKUOq2OZ58ZkVKVnnXOZWE5HoFDRAEitBT2O3vdXZBxhfJ\nGuQ6zrxruzIQoDq/ynhInYSHsppitS6ncq2xqtxa5H9suDZUhmyvmPiIGRXU\nfrmpuLzuCCAxFPs8Yvpx8aNVka+Yil608kujTPrnL6KlaJFMXruN8Q+ZGIzA\n33WBTWxykImos9inMpek3LUJGjyFuw6viNFaTFoqpNUo91WJzhfIU9QPEiVI\nP8B0I4WeGKwrBRLwTGJWP0E52x83PaMynst5Svph6aLVjPBLSSgC0gJB7d4K\n3Nf7gRdOMqcgDQkfo3EqLnZkxS/af6h4fc+QUIlgKccxNXH0vG2AK8aHSVlO\nwjLPPoQ8yVDpErb3gFkB9gFAg6AXx9OSsFdW9oYUuNobkGh+5i9LwXTTnLma\nHGuC\r\n=tCBA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhHwvADur2tlvZPJO9zxEsTab232QrgSBr83HUzswRSQIhANPAwIMM4m9wJqoa7bB7GwT2QwRg6DnS4yMlfENa9wIX"}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.10.0-alpha.1_1558609895960_0.9958458603727007"},"_hasShrinkwrap":false},"1.10.0":{"name":"react-media","version":"1.10.0","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest","testTypes":"tsc --noEmit --jsx react typeTest.tsx"},"peerDependencies":{"react":">=15 || ^0.14.7"},"dependencies":{"@babel/runtime":"^7.2.0","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@types/react":"^16.8.18","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12","babel-preset-env":"^1.6.1","babel-preset-react":"^6.11.1","babel-preset-stage-1":"^6.5.0","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","gzip-size":"^3.0.0","jest":"^23.6.0","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^15.4.1 || ^0.14.7","react-dom":"^15.3.0 || ^0.14.7","rollup":"^0.67.3","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-size-snapshot":"^0.7.0","rollup-plugin-uglify":"^6.0.0","typescript":"^3.4.5"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"bc71a72e333d9dd243f56f11f067e69a46edac64","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@1.10.0","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-FjgYmFoaPTImST06jqotuu0Mk8LOXiGYS/fIyiXuLnf20l3DPniBwtrxi604/HxxjqvmHS3oz5rAwnqdvosV4A==","shasum":"7b0c5fe8ac55a53ce31b5249db3aaf8a22ff7703","tarball":"https://registry.npmjs.org/react-media/-/react-media-1.10.0.tgz","fileCount":11,"unpackedSize":83582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf1VpCRA9TVsSAnZWagAAtXAP/3hmqX3JPZigmfAvjUn7\n2CEjBSXRFLZTaSF5a60ojJ7AKf1TL6jplNbIzjrcLw3oh6sOIExzD0V4zDUj\nVnif89qJjt7JvJlpj2n9jroyimfq1B9XFQPiNDD6cAFOeMSUZGbjDkz4Y+XE\nb61IkrVCOn7/NurVD6zNxWa64Hed4jw8h382SuNW2HL6dGxTkxFNeOou28xF\nM+/GEMQ+lXh5+ImEizke1VO/Ay1KGzs0pTN/kDhFh87aqOSxBCGvVRNqdg1a\nroSva4I6JlHq/4+8nHwWS5WD+AT4QDHp+vqQuakNPv/PAGf6mYN4Hvjx+T9N\nP7TJdN1G1TYyf1zUqMPSxdH9CHaVkGPfz1yXfsObrJY4Q3w8bPTIiaIuIJUr\nyJu2R5Zd+hS/5WxShNNBjq3LP02b36wZpMQP7WipPJz5jjiKF4IcxjlKJuk0\nvvtiX3QbD1F9akwVHgLuFybKVysW6ygPu/AJP+CPHdwvpry2ozeQrTQxWiVf\nrkcug2y7JHdwsZtjmdngr9XxlLn2Nm3TNI2LOd9YqbN7KZHClYCplP1I8LrF\ntjH3H12oVOQ6yQ3u6dQlzJ20IT8gmbo54V/vwouvFNclSOZK0x/LziiFaxi+\nrAWx5XaBA2aoHGKGn9tYMn/q9KOAlUxGA03j+YEqrt2gLAgZpmT9jEokG+jH\nOjy8\r\n=fOeR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY1RRF7o/r6bI1tWusLhc8lH74Go5jTtYXUofxvsz7LwIhANC0v1sp1HnvMEw65YOvvjgdwT9/CzDhT0AEn7S5NDcC"}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_1.10.0_1568626024387_0.8080136974796441"},"_hasShrinkwrap":false},"2.0.0-rc.0":{"name":"react-media","version":"2.0.0-rc.0","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest","testTypes":"tsc --noEmit --jsx react typeTest.tsx"},"peerDependencies":{"react":"^16.8.0"},"dependencies":{"@babel/runtime":"^7.9.6","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-proposal-export-default-from":"^7.8.3","@babel/plugin-transform-runtime":"^7.9.6","@babel/preset-env":"^7.9.6","@babel/preset-react":"^7.9.4","@rollup/plugin-babel":"5.0.0","@rollup/plugin-commonjs":"^11.1.0","@rollup/plugin-node-resolve":"^7.1.3","@rollup/plugin-replace":"^2.3.2","@testing-library/jest-dom":"^5.7.0","@testing-library/react":"^10.0.4","@types/react":"^16.8.18","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.4.2","babel-plugin-dev-expression":"^0.2.2","babel-plugin-transform-react-remove-prop-types":"^0.4.12","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","eslint-plugin-react-hooks":"^4.0.0","gzip-size":"^3.0.0","jest":"^23.6.0","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^16.8.0","react-dom":"^16.8.0","rollup":"^2.9.0","rollup-plugin-size-snapshot":"^0.11.0","rollup-plugin-terser":"^5.3.0","typescript":"^3.4.5"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"7380364fc7ff7c91cd9d4bed9378d4075d4736e1","readme":"# react-media [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-media\n[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-media\n\n[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.\n\nA `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.\n\n## Installation\n\nUsing npm:\n\n    $ npm install --save react-media\n\nThen, use as you would anything else:\n\n```js\n// using ES modules\nimport Media from 'react-media';\n\n// using CommonJS modules\nvar Media = require('react-media');\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-media\"></script>\n```\n\nYou can find the library on `window.ReactMedia`.\n\n## Basic usage\n\n### queries\n\nRender a `<Media>` component with a `queries` prop whose value is an object,\nwhere each value is a valid\n[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries).\nThe `children` prop should be a function whose argument will be an object with the\nsame keys as your `queries` object, and whose values are booleans indicating whether\neach query matches.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media queries={{\n          small: \"(max-width: 599px)\",\n          medium: \"(min-width: 600px) and (max-width: 1199px)\",\n          large: \"(min-width: 1200px)\"\n        }}>\n          {matches => (\n            <Fragment>\n              {matches.small && <p>I am small!</p>}\n              {matches.medium && <p>I am medium!</p>}\n              {matches.large && <p>I am large!</p>}\n            </Fragment>\n          )}\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\n### query\n\nAlternatively, if you only need to match against a single media query, the `query` prop provides a less-verbose approach.\nMore documentation about the difference between `query` and `queries` can be found below.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query=\"(max-width: 599px)\" render={() =>\n          (\n            <p>I am small!</p>\n          )}\n        />\n      </div>\n    );\n  }\n}\n```\n\n## `query` vs `queries`\n\nThe `queries` prop was added to allow for multiple media queries to be matched without excessive nesting or other\nworkarounds. The `query` prop was retained out of recognition that a single query covers many use cases, and there\nis already a lot of usage that would be a pain to migrate.\n\nThe salient points:\n\n* **You cannot use them together**: if you do, the component will throw an error. This is to avoid confusion around\nprecedence.\n* **The render methods differ slightly**: for the `queries` prop, the `render` and child JSX methods will render if\n**at least one** of the given queries is matched. The `query` prop renders if the given query matches.\n\n\n## `queries`\n\nIn addition to passing a valid media query string, the `queries`\nprop will also accept an object of objects whose forms are similar to\n[React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html)\nin e.g. `<div style>`. These objects are converted to CSS\nmedia queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media queries={{ small: { maxWidth: 599 } }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media queries={{ small: \"(max-width: 599px)\" }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when **at least one** of the queries matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media queries={{ foo: ... }} render={() => <p>I matched!</p>} />`|\n|children (function)|Receives an object of booleans whose keys are the same as the `queries` prop, indicating whether each media query matched. Use this prop if you need to render different output for each of specified queries.|`<Media queries={{ foo: ... }}>{matches => matches.foo ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when **at least one** of the queries matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the queries match or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media queries={{ ... }}><p>I matched!</p></Media>`|\n\n## `query`\n\nIn addition to passing a valid media query string, the `query` prop will also accept an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media query={{ maxWidth: 599 }}>\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when the query matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media query=\"...\" render={() => <p>I matched!</p>} />`|\n|children (function)|Receives a single boolean element, indicating whether the media query matched. Use this prop if you need to render something when the query doesn't match.|`<Media query=\"...\">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when the query matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the query matches or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media query=\"...\"><p>I matched!</p></Media>`|\n\n## `onChange`\n\nYou can specify an optional `onChange` prop, which is a callback function that will be invoked when the status of the media queries changes. This can be useful for triggering side effects, independent of the render lifecycle.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media\n          query={{ small: \"(max-width: 599px)\" }}\n          onChange={matches =>\n            matches.small\n              ? alert('The document is less than 600px wide.')\n              : alert('The document is at least 600px wide.')\n          }\n        />\n      </div>\n    );\n  }\n}\n```\n\n### Server-side rendering (SSR)\n\nIf you render a `<Media>` component on the server, it will match by default. You can override the default behavior by setting the `defaultMatches` prop.\n\nWhen rendering on the server you can use the `defaultMatches` prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device [by analyzing the user-agent string](https://github.com/ReactTraining/react-media/pull/50#issuecomment-415700905) from the HTTP request in your server-side rendering code.\n\n```js\ninitialState = {\n  device: 'mobile' // add your own guessing logic here, based on user-agent for example\n};\n\n<div>\n  <Media\n    queries={{ medium: \"(max-width: 500px)\" }}\n    defaultMatches={{ medium: state.device === 'mobile' }}\n    render={() => <Text>Render me below medium breakpoint.</Text>}\n  />\n\n  <Media\n    queries={{ medium: \"(min-width: 501px)\" }}\n    defaultMatches={{ medium: state.device === 'desktop' }}\n    render={() => <Text>Render me above medium breakpoint.</Text>}\n  />\n</div>;\n```\n\n## `targetWindow`\n\nAn optional `targetWindow` prop can be specified if you want the `queries` to be evaluated against a different window object than the one the code is running in. This can be useful if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202). See [this PR thread](https://github.com/ReactTraining/react-media/pull/78) for context.\n\n## About\n\n`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@2.0.0-rc.0","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ncN8qx6cz3uPtfJyNaI1/jGBvCUDkHEnj0+oVgjhBZ2Ya4CrjxeI7o1sZ0ULBHkctm8KgEgxKg6R1O3BPja/dA==","shasum":"c4d5c302ab228bb55c47ec86c44445dac8e2646e","tarball":"https://registry.npmjs.org/react-media/-/react-media-2.0.0-rc.0.tgz","fileCount":11,"unpackedSize":93743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezjUSCRA9TVsSAnZWagAADIYP/RP/Xfi5UKjB/xE7+33s\nmlANCmV7xnHJwZhZOoasHRw9SX7u+1rOK2QfIw/vs6gRHQVYtPywq0++jF/i\n9kWBzPEQ7+YRpFm3lM82ItUzkn1ICBToZgkmxsLnPX3F96QbXMGImYqHCHvW\n4BvfuRApTl9R3Ud6JflfjaBQYX76ikknTlaxMIPpThCLSAJp8DPGQ0EfKgWC\n6BL5tWpBf7x7N0bn6vUgWCpEnhcfuDXsVA8LGxLrEYnSKtd87FztlsP0ywSB\nTX/d8gS3ZCsGYgHvfO13N/vdTBq8r2FNBLWhVnAOpLj/JM6dfOkXhu2qknPk\nMPjDeX4mJAZUCXufBIL3ORyVKUHHVVDrU8iCvtnj7w6zVfQcdpclRoR68115\n4ae3OA2vUaQ8oTKhLJQV1X3ewxH9xsmVFFRo3y7DAl//X9KJvHlWM/+5Ut+l\nkTdBDuFqGC1EkTq1NtdDYSaKvlVsgwz076bP41flMwFghD5R5CPe8oz5oKHQ\nkP09mGwSUamBPq602nF6q0cXN17+9xlZSkTEncmE7zBa2R1ZRCQeFkf8RJGg\nrxtXzhBBMEcu7vtjabJBa1Qlf40VA4Fh2un29LDaEe7XKSEt3DGJx78vsjRW\nwBbRbpo+AjVZWJLXtXMKoo+OdpiQzG0TZ1Qx8xGz8xesZdkzyFVceQfWa2MP\nah15\r\n=ikg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHW48eWUQ7/vsGCUWSu/hkw4XFTH16KNveKn9+IlW9JVAiEAlVUPR7fTgFi61f35w+QXV86fjI9PzvTtapvAp7ZKQBY="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_2.0.0-rc.0_1590572306464_0.9098938515255912"},"_hasShrinkwrap":false},"2.0.0-rc.1":{"name":"react-media","version":"2.0.0-rc.1","description":"CSS media queries for React","repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"license":"MIT","author":{"name":"Michael Jackson"},"main":"index.js","module":"esm/react-media.js","unpkg":"umd/react-media.js","types":"index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build","clean":"git clean -fdX .","lint":"eslint modules","test":"jest","testTypes":"tsc --noEmit --jsx react typeTest.tsx"},"peerDependencies":{"react":"^16.8.0"},"dependencies":{"@babel/runtime":"^7.9.6","invariant":"^2.2.2","json2mq":"^0.2.0","prop-types":"^15.5.10"},"devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-proposal-export-default-from":"^7.8.3","@babel/plugin-transform-runtime":"^7.9.6","@babel/preset-env":"^7.9.6","@babel/preset-react":"^7.9.4","@rollup/plugin-babel":"5.0.0","@rollup/plugin-commonjs":"^11.1.0","@rollup/plugin-node-resolve":"^7.1.3","@rollup/plugin-replace":"^2.3.2","@testing-library/jest-dom":"^5.7.0","@testing-library/react":"^10.0.4","@types/react":"^16.8.18","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.4.2","babel-plugin-dev-expression":"^0.2.2","babel-plugin-transform-react-remove-prop-types":"^0.4.12","eslint":"^5.9.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.0","eslint-plugin-react":"^7.11.1","eslint-plugin-react-hooks":"^4.0.0","gzip-size":"^3.0.0","jest":"^23.6.0","pascal-case":"^2.0.1","pretty-bytes":"^4.0.2","react":"^16.8.0","react-dom":"^16.8.0","rollup":"^2.9.0","rollup-plugin-size-snapshot":"^0.11.0","rollup-plugin-terser":"^5.3.0","typescript":"^3.4.5"},"keywords":["react","media","media query","query","css","responsive"],"gitHead":"b0330ad0cfa6197684e0f4554502dd381db14774","readme":"# react-media [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square\n[build]: https://travis-ci.org/ReactTraining/react-media\n[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-media\n\n[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.\n\nA `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.\n\n## Installation\n\nUsing npm:\n\n    $ npm install --save react-media\n\nThen, use as you would anything else:\n\n```js\n// using ES modules\nimport Media from 'react-media';\n\n// using CommonJS modules\nvar Media = require('react-media');\n```\n\nThe UMD build is also available on [unpkg](https://unpkg.com):\n\n```html\n<script src=\"https://unpkg.com/react-media\"></script>\n```\n\nYou can find the library on `window.ReactMedia`.\n\n## Basic usage\n\n### queries\n\nRender a `<Media>` component with a `queries` prop whose value is an object,\nwhere each value is a valid\n[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries).\nThe `children` prop should be a function whose argument will be an object with the\nsame keys as your `queries` object, and whose values are booleans indicating whether\neach query matches.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media queries={{\n          small: \"(max-width: 599px)\",\n          medium: \"(min-width: 600px) and (max-width: 1199px)\",\n          large: \"(min-width: 1200px)\"\n        }}>\n          {matches => (\n            <Fragment>\n              {matches.small && <p>I am small!</p>}\n              {matches.medium && <p>I am medium!</p>}\n              {matches.large && <p>I am large!</p>}\n            </Fragment>\n          )}\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\n### query\n\nAlternatively, if you only need to match against a single media query, the `query` prop provides a less-verbose approach.\nMore documentation about the difference between `query` and `queries` can be found below.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media query=\"(max-width: 599px)\" render={() =>\n          (\n            <p>I am small!</p>\n          )}\n        />\n      </div>\n    );\n  }\n}\n```\n\n## `query` vs `queries`\n\nThe `queries` prop was added to allow for multiple media queries to be matched without excessive nesting or other\nworkarounds. The `query` prop was retained out of recognition that a single query covers many use cases, and there\nis already a lot of usage that would be a pain to migrate.\n\nThe salient points:\n\n* **You cannot use them together**: if you do, the component will throw an error. This is to avoid confusion around\nprecedence.\n* **The render methods differ slightly**: for the `queries` prop, the `render` and child JSX methods will render if\n**at least one** of the given queries is matched. The `query` prop renders if the given query matches.\n\n\n## `queries`\n\nIn addition to passing a valid media query string, the `queries`\nprop will also accept an object of objects whose forms are similar to\n[React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html)\nin e.g. `<div style>`. These objects are converted to CSS\nmedia queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media queries={{ small: { maxWidth: 599 } }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media queries={{ small: \"(max-width: 599px)\" }}>\n          {matches =>\n            matches.small ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when **at least one** of the queries matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media queries={{ foo: ... }} render={() => <p>I matched!</p>} />`|\n|children (function)|Receives an object of booleans whose keys are the same as the `queries` prop, indicating whether each media query matched. Use this prop if you need to render different output for each of specified queries.|`<Media queries={{ foo: ... }}>{matches => matches.foo ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when **at least one** of the queries matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the queries match or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media queries={{ ... }}><p>I matched!</p></Media>`|\n\n## `query`\n\nIn addition to passing a valid media query string, the `query` prop will also accept an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>These two Media components are equivalent</h1>\n\n        <Media query={{ maxWidth: 599 }}>\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n\n        <Media query=\"(max-width: 599px)\">\n          {matches =>\n            matches ? (\n              <p>The document is less than 600px wide.</p>\n            ) : (\n              <p>The document is at least 600px wide.</p>\n            )\n          }\n        </Media>\n      </div>\n    );\n  }\n}\n```\n\nKeys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.\n\n### Render props\n\nThere are three props which allow you to render your content. They each serve a subtly different purpose.\n\n|prop|description|example|\n|---|---|---|\n|render|Only invoked when the query matches. This is a nice shorthand if you only want to render something for a matching query.|`<Media query=\"...\" render={() => <p>I matched!</p>} />`|\n|children (function)|Receives a single boolean element, indicating whether the media query matched. Use this prop if you need to render something when the query doesn't match.|`<Media query=\"...\">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media>`|\n|children (react element)|If you render a regular React element within `<Media>`, it will render that element when the query matches. This method serves the same purpose as the `render` prop, however, you'll create component instances regardless of whether the query matches or not. Hence, using the `render` prop is preferred ([more info](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260)).|`<Media query=\"...\"><p>I matched!</p></Media>`|\n\n## `onChange`\n\nYou can specify an optional `onChange` prop, which is a callback function that will be invoked when the status of the media queries changes. This can be useful for triggering side effects, independent of the render lifecycle.\n\n```jsx\nimport React from 'react';\nimport Media from 'react-media';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Media\n          query={{ small: \"(max-width: 599px)\" }}\n          onChange={matches =>\n            matches.small\n              ? alert('The document is less than 600px wide.')\n              : alert('The document is at least 600px wide.')\n          }\n        />\n      </div>\n    );\n  }\n}\n```\n\n### Server-side rendering (SSR)\n\nIf you render a `<Media>` component on the server, it will match by default. You can override the default behavior by setting the `defaultMatches` prop.\n\nWhen rendering on the server you can use the `defaultMatches` prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device [by analyzing the user-agent string](https://github.com/ReactTraining/react-media/pull/50#issuecomment-415700905) from the HTTP request in your server-side rendering code.\n\n```js\ninitialState = {\n  device: 'mobile' // add your own guessing logic here, based on user-agent for example\n};\n\n<div>\n  <Media\n    queries={{ medium: \"(max-width: 500px)\" }}\n    defaultMatches={{ medium: state.device === 'mobile' }}\n    render={() => <Text>Render me below medium breakpoint.</Text>}\n  />\n\n  <Media\n    queries={{ medium: \"(min-width: 501px)\" }}\n    defaultMatches={{ medium: state.device === 'desktop' }}\n    render={() => <Text>Render me above medium breakpoint.</Text>}\n  />\n</div>;\n```\n\n## `targetWindow`\n\nAn optional `targetWindow` prop can be specified if you want the `queries` to be evaluated against a different window object than the one the code is running in. This can be useful if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202). See [this PR thread](https://github.com/ReactTraining/react-media/pull/78) for context.\n\n## About\n\n`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"homepage":"https://github.com/ReactTraining/react-media#readme","_id":"react-media@2.0.0-rc.1","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-g9NN2NkmQBJn6Z6prKm3/SuG90p+rWiTIxHjXGhzhf00uRncVB5QmJTZgf2GVz1Bj93b1XwkdRZkYRAN8uMoBQ==","shasum":"1a8ed86ddb7f79fd1c70516e825179eb497adf9c","tarball":"https://registry.npmjs.org/react-media/-/react-media-2.0.0-rc.1.tgz","fileCount":11,"unpackedSize":94045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4OP2CRA9TVsSAnZWagAAs/MP/3xnokdbT3tr4PnYl0xz\n2mXCFouVc9RXZItjk3wV+DvOcvkBj1whObewSfS+pRAQPk/ng3DRbUQhCel/\nLTiuUdEQdvBz7nGdshGIbkXoYwx0dTQG9BehfUE3SC2T1mh3c1lRELrl5Ng4\n9CZ9mboN7xAar+JL1It1m3cspReMphjp1rkIH7K5GhbtHj8Vx0pmlPOvpXiD\n/gOTMoIgTDXT72z8jS77AjO9Fbze4H33nTQ2klRDL43nFZqSMSXTE3inMwlu\nz6cjd8S8QqapkpSSUg5l/PI/yoEfcNlDDrIlbJJ2mkrTnvD4tP4E6KXQNV05\n5jpGBGKzTqYLs87lM2J49Q/rIc8IX76FKgihDBLzxDT5YrF9jU8UOPRi9sm+\nUGzga+NzQJeM4zlsz4I7YSlibLZyYEVociCVszPjQo25nXhknAzI2K9LeqHO\n5Pa6V66O3N9Zun11kZI+1kpVJJir0CROflYizijlvU9msizSB27oRpa+tu1t\nCvG5qiusfoxgdytv1ZkkcO2IpQcY7uuxBPPbvu9biP6axbXHuFga7uUVkV24\ntcZBZ8kV+SW19zAIWpe8eUmQlL7dvQ1LRsCCN7tel8/PQtEosfrwOoeVU5kR\nWnVBsdbGRrJezoHnrwTnKtfl+k8LUQM+thkIrq8TJr7nfXjzkYFnciNGZF3n\nqJNP\r\n=Njor\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcC9RUlhfxLaB7gSpX8Ts8du6CzRG8X630cqZiFmAYggIgbpyTNJa7UMv/COWqWHHlrKQ25hQPDQZRINW4yrtHbIA="}]},"maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"_npmUser":{"name":"mjackson","email":"npm@mjackson.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media_2.0.0-rc.1_1591796725856_0.2625007126125387"},"_hasShrinkwrap":false}},"readme":"","maintainers":[{"name":"mjackson","email":"mjijackson@gmail.com"}],"time":{"modified":"2022-06-26T02:02:51.097Z","created":"2014-11-21T09:30:27.110Z","0.0.1":"2014-11-21T09:30:27.110Z","0.1.0":"2016-08-03T18:15:17.587Z","1.0.0":"2016-08-03T18:31:11.634Z","1.1.0":"2016-08-03T23:45:08.891Z","1.1.1":"2016-08-04T04:19:19.307Z","1.2.0":"2016-08-04T15:13:44.644Z","1.2.1":"2016-08-04T15:29:32.403Z","1.2.2":"2016-09-30T22:22:50.729Z","1.3.0":"2016-10-04T16:33:38.764Z","1.3.1":"2016-10-04T16:37:20.876Z","1.3.2":"2016-10-10T17:57:20.002Z","1.4.0":"2016-12-14T16:26:21.507Z","1.5.0":"2017-02-18T00:22:14.930Z","1.5.1":"2017-02-18T00:24:58.425Z","1.6.0":"2017-07-11T07:39:14.067Z","1.6.1":"2017-07-14T05:11:21.803Z","1.7.0":"2018-02-01T15:54:19.782Z","1.8.0-rc.1":"2018-02-08T05:29:17.119Z","1.8.0":"2018-02-08T18:35:05.513Z","1.9.0":"2018-12-12T10:40:55.520Z","1.9.1":"2018-12-12T14:13:43.023Z","1.9.2":"2018-12-12T18:37:45.948Z","2.0.0-alpha.1":"2019-03-16T09:02:41.849Z","2.0.1-alpha.0":"2019-04-03T08:59:33.899Z","1.10.0-alpha.0":"2019-04-03T09:06:11.888Z","1.10.0-alpha.1":"2019-05-23T11:11:36.152Z","1.10.0":"2019-09-16T09:27:04.480Z","2.0.0-rc.0":"2020-05-27T09:38:26.641Z","2.0.0-rc.1":"2020-06-10T13:45:25.968Z"},"author":{"name":"Michael Jackson"},"license":"MIT","readmeFilename":"","description":"CSS media queries for React","homepage":"https://github.com/ReactTraining/react-media#readme","keywords":["react","media","media query","query","css","responsive"],"repository":{"type":"git","url":"git+https://github.com/ReactTraining/react-media.git"},"bugs":{"url":"https://github.com/ReactTraining/react-media/issues"},"users":{"r3nya":true,"jk6":true,"samar":true,"alimaster":true,"cheapsteak":true,"warhawk94":true,"shianqi":true,"kyllle":true,"karzanosman984":true,"ostgals":true}}