{"_id":"@alexsasharegan/react-match-media","_rev":"2-a8db3cec4ae401dd64500d2b51bc1cbf","name":"@alexsasharegan/react-match-media","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.1":{"name":"@alexsasharegan/react-match-media","version":"1.1.1","description":"A render prop component that provides idiomatic react component access to the match media API.","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","scripts":{"prebuild":"rm -Rf lib cjs esm","build:docs":"typedoc --options typedoc.js","build:esm":"tsc -p tsconfig.json","build:cjs":"tsc -p tsconfig.cjs.json","build":"npm run build:cjs && npm run build:esm","prepublishOnly":"npm run build","release":"standard-version","postrelease":"git push --follow-tags origin master && npm publish --access public","test":"exit 1"},"repository":{"type":"git","url":"git+https://github.com/alexsasharegan/react-match-media.git"},"author":{"name":"Alex Regan"},"license":"MIT","bugs":{"url":"https://github.com/alexsasharegan/react-match-media/issues"},"homepage":"https://github.com/alexsasharegan/react-match-media#readme","peerDependencies":{"react":"^16.6.3"},"devDependencies":{"@types/react":"^16.7.7","prettier":"^1.15.2","standard-version":"^4.4.0","typedoc":"^0.13.0","typescript":"^3.1.6"},"dependencies":{},"gitHead":"8cfeb3ca8f863dd0deb2a56c4a3c58d851673f3c","_id":"@alexsasharegan/react-match-media@1.1.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"alexsasharegan","email":"alex.joseph.regan@gmail.com"},"dist":{"integrity":"sha512-FGGvN02D6DoVro/wNk3oJcEuu0Grn/gIFG4KK/0d2dvo+VsZhI0xkr/nZxNMyinARS/Tr0cfuqc8dw/ta8/RaQ==","shasum":"41bf2271a5caaad76acefa36b91f40d0bab6307a","tarball":"https://registry.npmjs.org/@alexsasharegan/react-match-media/-/react-match-media-1.1.1.tgz","fileCount":19,"unpackedSize":16837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/DiDCRA9TVsSAnZWagAAR4kP/2ChsUaAgPVjx9iWY8O7\np+S/MDRjWi2TnazTvd+UdMnucqUaz3Z9W2Bgp+atAky2K0vI3WvAAAYyw4jW\nPUQ/BwKgJW1a1cszZ6qGTsLDZxblFz5a5agBwy+oS24clDEsJM7rtrLLIb9h\nGsxEoV+qif40RBgfBfqaBt07GTcXo1ICMgNkK05iFg3VnES2QqWMzoorub3x\n0VydnIIPPzaNVL1rxyYPmVKTIjyhCVyVdRCvFE21b0A54dhkRKoGyx++SPtE\nn6CcytMtbyTgsyRBpnJ5rNG9PsSqkB1e0/kbWmYYz6cks/4R7MYx4aqYQ/N+\nLVa5ulGwGR7Ui2unI7F3xAzwGwJngm6C5KoQpleMr8W7yJc9/345sBaXJAdj\n8rWkjMgNi11DdSYvKvCAyALGK1D2Anz9XEP0Qi0aOpU60tcL9AwSigM4AZXT\nTXN+VW8/TV6WfBHS97Q9ate5gTy099MfGdAn/bEa1g6JIFIXx0d5YCL6GYsa\n1BgrI6AIXsxkXtqdgcrhWOgD9TCuk0biZBcfpowoVcAAzNkZNV6hXHvCbOPB\nrZzjIupWuIgQs8BUDW6FJferqmUe5MArWBWq30DM7KyVdZN5uP7lmC96Jp9H\n76rDNBN5NDgulf2gQ93MTSouMfMAUF79UiuEclDq26Tgd7XkdtPa2Kx9qwFw\nDsMt\r\n=oBPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFk5tGFHx02AgkTWqiWUUUgmJyGvN6E/4muWc29Cub6AAiEAgDMO1RzyT3Wccg8WZRrYtUaufAWsp6wrLKElzVQQxpo="}]},"maintainers":[{"name":"alexsasharegan","email":"alex.joseph.regan@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-match-media_1.1.1_1543256195216_0.6893182133748914"},"_hasShrinkwrap":false},"1.1.2":{"name":"@alexsasharegan/react-match-media","version":"1.1.2","description":"A render prop component that provides idiomatic react component access to the match media API.","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","scripts":{"prebuild":"rm -Rf lib cjs esm","build:docs":"typedoc --options typedoc.js","build:esm":"tsc -p tsconfig.json","build:cjs":"tsc -p tsconfig.cjs.json","build":"npm run build:cjs && npm run build:esm","prepublishOnly":"npm run build","release":"standard-version","postrelease":"git push --follow-tags origin master && npm publish --access public","test":"exit 1"},"repository":{"type":"git","url":"git+https://github.com/alexsasharegan/react-match-media.git"},"author":{"name":"Alex Regan"},"license":"MIT","bugs":{"url":"https://github.com/alexsasharegan/react-match-media/issues"},"homepage":"https://github.com/alexsasharegan/react-match-media#readme","peerDependencies":{"react":"^16.6.3"},"devDependencies":{"@types/react":"^16.7.7","prettier":"^1.15.2","standard-version":"^4.4.0","typedoc":"^0.13.0","typescript":"^3.1.6"},"dependencies":{},"gitHead":"515fe4fbe0023480871ffbc0bec6d825f0007db0","_id":"@alexsasharegan/react-match-media@1.1.2","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"alexsasharegan","email":"alex.joseph.regan@gmail.com"},"dist":{"integrity":"sha512-Y7/9V1B2fyW0kL5UCQpBlVLwHWDRMW9+gz48vSALnuSzFG8HZkG/0o0/weuhpAbMlZAo8H2CBFjv6epN+eoipg==","shasum":"82cbdde3e81bd229dfe234affae6df4e7c23e2d8","tarball":"https://registry.npmjs.org/@alexsasharegan/react-match-media/-/react-match-media-1.1.2.tgz","fileCount":24,"unpackedSize":23986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/vOSCRA9TVsSAnZWagAAZggP/Ai2Dl2cmC5r10HT9Lox\n5IGbTLqnTHxw4UpRlefu42cAAuBQUQZsyVWuMoJNL/OaakMVc0Dl+pTYCJZJ\nwf1Lbj7pifKOUDabFOWn7al8iSUdN2WaPrg11TqOOrhrIf+l9QLoqH5d5o0B\ni7VgPsiU0cXS2YO65DHsIs9/VlkKEarsELGeJ2TP3RXvnZWSTTI5i2w1IeaH\nVnoPZNrsa+g4X02MNqMVNPon1IPZY0rWvdPvG3sJ7aSH2BGjRMOgEqLm9dAa\nUlj3dIOYoSLPHM4dFRCodwxFoDVAT9k94sjAi+g7e0PuBU4umK52LhAKvHB2\nywqCjMoXZcoc+BdYGRyuKEhQvaRzb4CBnu5UrzJIfjriJaaL88N6JDgbyhjp\nlR0Ai9vj8TSYNZcYqmZvTClBdcL304unJfiH7kvADS/YAqPDxGmxfILWa/V6\nEhOKAt66SKPu4ae1cRPLUkXO8CDqg6Rgbc/T7P35LT3oFLCeDSWLRzmea96h\nxrdKceTRyfx48118ZxUeGV/rnuLpxJZcc7qDpBDAStnJXXd3wHNa1ShOWwzw\n8XeJV04D+PDzQCRS/Yprw6Or472AZHwNeZStUwPSxKx0k/syrAU7Vc01tUFz\nMitPzRVuV900ZscfFrEKH6E7ZCZ8LSVkq/w3IWwbzhQkbhhHCJGbQ+IjofPd\nS5Ka\r\n=ZZ1x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQFbDSe891RUDTk76qwLzM5OdKd0+ZkMfDTiTR/enLRQIgMCsE7PE5Nh1mpjIM1xTtYhpx8kwbkvOGD/srz3Jh2Bs="}]},"maintainers":[{"name":"alexsasharegan","email":"alex.joseph.regan@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-match-media_1.1.2_1543435154222_0.4977377826041678"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-26T18:16:35.052Z","1.1.1":"2018-11-26T18:16:35.345Z","modified":"2022-04-04T12:41:33.164Z","1.1.2":"2018-11-28T19:59:14.335Z"},"maintainers":[{"name":"alexsasharegan","email":"alex.joseph.regan@gmail.com"}],"description":"A render prop component that provides idiomatic react component access to the match media API.","homepage":"https://github.com/alexsasharegan/react-match-media#readme","repository":{"type":"git","url":"git+https://github.com/alexsasharegan/react-match-media.git"},"author":{"name":"Alex Regan"},"bugs":{"url":"https://github.com/alexsasharegan/react-match-media/issues"},"license":"MIT","readme":"# react-match-media\n\n[![npm](https://img.shields.io/npm/v/@alexsasharegan/react-match-media.svg?style=for-the-badge)](https://img.shields.io/npm/v/@alexsasharegan/react-match-media)\n[![npm downloads](https://img.shields.io/npm/dt/@alexsasharegan/react-match-media.svg?style=for-the-badge)](https://www.npmjs.com/package/@alexsasharegan/react-match-media)\n[![GitHub issues](https://img.shields.io/github/issues/alexsasharegan/react-match-media.svg?style=for-the-badge)](https://github.com/alexsasharegan/react-match-media/issues)\n[![GitHub license](https://img.shields.io/github/license/alexsasharegan/react-match-media.svg?style=for-the-badge)](https://github.com/alexsasharegan/react-match-media/blob/master/LICENSE)\n\nA render prop component that provides idiomatic react component access to the\nmatch media API.\n\n[Type Documentation](https://naughty-kalam-69f73a.netlify.com/)\n\n## Install\n\n### NPM\n\n```sh\nnpm install @alexsasharegan/react-match-media\n```\n\n### Yarn\n\n```sh\nyarn add @alexsasharegan/react-match-media\n```\n\n## Usage\n\n### As Render Prop\n\n```jsx\nimport { MatchMedia } from \"@alexsasharegan/react-match-media\";\n\nfunction BootstrapBreakpoints(props) {\n  return (\n    <MatchMedia\n      queries={{\n        xs: \"(max-width: 575.98px)\",\n        sm: \"(min-width: 576px) and (max-width: 767.98px)\",\n        md: \"(min-width: 768px) and (max-width: 991.98px)\",\n        lg: \"(min-width: 992px) and (max-width: 1199.98px)\",\n        xl: \"(min-width: 1200px)\",\n      }}\n    >\n      {({ xs, sm, md, lg, xl }) => (\n        <main>\n          <h1>Match Media</h1>\n          <pre>{prettyPrint({ xs, sm, md, lg, xl })}</pre>\n        </main>\n      )}\n    </MatchMedia>\n  );\n}\n\nfunction prettyPrint(value) {\n  return JSON.stringify(value, null, 2);\n}\n```\n\n### As HOC\n\n```jsx\nimport { MatchMedia } from \"@alexsasharegan/react-match-media\";\n\nconst ExampleHOC = withBootstrapBreakpoints(function Example({ matches }) {\n  return (\n    <main>\n      <h1>Match Media</h1>\n      <pre>{prettyPrint(matches)}</pre>\n    </main>\n  );\n});\n\nconst withBootstrapBreakpoints = Component => props => (\n  <MatchMedia\n    queries={{\n      xs: \"(max-width: 575.98px)\",\n      sm: \"(min-width: 576px) and (max-width: 767.98px)\",\n      md: \"(min-width: 768px) and (max-width: 991.98px)\",\n      lg: \"(min-width: 992px) and (max-width: 1199.98px)\",\n      xl: \"(min-width: 1200px)\",\n    }}\n  >\n    {matches => <Component matches={matches} {...props} />}\n  </MatchMedia>\n);\n\nfunction prettyPrint(value) {\n  return JSON.stringify(value, null, 2);\n}\n```\n","readmeFilename":"README.md"}