{"_id":"@donovan-graham/react-media-match","_rev":"1-bcc28e4677bc7e4edcf85199782bfab5","name":"@donovan-graham/react-media-match","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@donovan-graham/react-media-match","version":"1.0.0","description":"Use CSS Media Queries and React's createContext API to build responsive layouts for any breakpoint or device.","author":{"name":"Donovan Graham","email":"donovan@platform7.com"},"license":"MIT","keywords":["react","match media","media query","match","media","query","css","responsive"],"main":"./src/index.js","scripts":{"test":"jest","watch":"webpack --watch --mode development","start":"webpack-dev-server --mode development","build":"webpack --mode production --optimize-minimize","prettier":"prettier --write \"{src,example,__tests__}/**/*.js?(x)\""},"jest":{"setupTestFrameworkScriptFile":"./testSetup.js"},"peerDependencies":{"react":">= 16.3.0 < 17"},"dependencies":{"prop-types":"^15.5.7"},"devDependencies":{"babel-cli":"^6.26.0","babel-jest":"^23.4.2","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19","enzyme":"^3.4.1","enzyme-adapter-react-16":"^1.2.0","html-webpack-plugin":"^3.2.0","jest":"^23.5.0","prettier":"^1.11.1","react":"^16.4.0","react-dom":"^16.4.0","react-test-renderer":"^16.4.2","webpack":"^4.1.0","webpack-cli":"^3.1.0","webpack-dev-server":"^3.1.0"},"gitHead":"b593c7e22a3f8e46fda2bf44a51310fdc12d174c","_id":"@donovan-graham/react-media-match@1.0.0","_npmVersion":"6.1.0","_nodeVersion":"10.7.0","_npmUser":{"name":"donovan-graham","email":"donovan@platform7.com"},"dist":{"integrity":"sha512-9eFgvetcstjV7NBPCanvtGBfVfLSRgTRqBHVJaavrFv3lh7h4RCoY58AW6xUIRSA4oytn4g3RZnw4b1dkkWb6w==","shasum":"f5290d45518136a3206d92ae3ff92622bc83cc13","tarball":"https://registry.npmjs.org/@donovan-graham/react-media-match/-/react-media-match-1.0.0.tgz","fileCount":3,"unpackedSize":6448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfI90CRA9TVsSAnZWagAA03sQAJFjsnEKvbg2hfjoyipc\naaYhXeueEUZ7rFXPjB+Fmd1WzcYcvNy0c6U23jmzn4aw2x4MwMALxWPm5kQy\niG3Q96qpySx4wffQ3eGwwreoG1D1gpXB/stfKxQfwJoujl0Qwqp5gStK7jGm\nUuUhJL8Nni+3EYQdguMFSRehmqyDmE8N3oi4Dj67tsbL6wNLlThw4Ep3I6FI\nEJOY5uxc1Z8Q6bKidhZD/VaM0L4oK8Kgv6B5iXeGrk1u9E1Jui6dUCxcul1K\nQ/pu2cX+89qvnGGIGh9oRnCHceUbEf1l5eSSBhm3NLSxh866+CbJq4LnvZlZ\nRW0E1uOArLY9ShMrN7LPIB5M37M/G0u162o2NWZsxYfhnVa+3NiQOEPzerDY\nEffxIM0Ho8m7fvAFfQIWRPO5/jJAIHHpavHEyeIvYb+eglzh/amAozm+3N9h\n2OwVVizK5s1ewIb1xlbthniE9KB6eiVmRwrpTWKmykS+cKuLkjn7t2EKi3+j\nSpLWvjiXq+ecc9u8k+BMYo31NFOHShXDZ4+7Xe1EEbKUHj0ci+/wQEi0LB4R\n7K3lWNsIvLa1GTJmagr4/qsXnKIdzotalyZq3F7WuTYAJTe3V0Un/SNXNVK/\n2FuzynwouNBg7MYOdpGwQXETYkeBvRe75NlcSeDFe2Qie3EgIt6z7HPlXoyH\nkKsF\r\n=rMkP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvQit+oMne0fVgrgB43rDweeJENxZvvoB3UC/Phn9AaAIgeSBuc1vXjAWQh/ElfemoReOrTuxLFdLfzo7ZO7rm0tc="}]},"maintainers":[{"name":"donovan-graham","email":"donovan@platform7.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-match_1.0.0_1534889844205_0.29954231988090707"},"_hasShrinkwrap":false}},"time":{"created":"2018-08-21T22:17:23.952Z","1.0.0":"2018-08-21T22:17:24.471Z","modified":"2022-04-05T05:15:50.669Z"},"maintainers":[{"name":"donovan-graham","email":"donovan@platform7.com"}],"description":"Use CSS Media Queries and React's createContext API to build responsive layouts for any breakpoint or device.","keywords":["react","match media","media query","match","media","query","css","responsive"],"author":{"name":"Donovan Graham","email":"donovan@platform7.com"},"license":"MIT","readme":"# React Media Match\n\n\nEasily use CSS Media Queries and React's createContext API to build responsive layouts for any breakpoint or device. Use convenient components or simply extend to create your own.\n\n## Installation\n\n```bash\n$ npm i @donovan-graham/react-media-match\n```\n\n## Setup\n\nSetup MediaManager once at top or root level providing it with queries object.\nThe keys you defined in the queries object are referenced later.\n\n```jsx\nimport React from 'react';\nimport MediaManager from '@donovan-graham/react-media-match';\n\nconst queries = {\n  mobile: '(max-width: 599px)',\n  tablet: '(min-width: 600px) and (max-width: 1023px)',\n  desktop: '(min-width: 1024px)'\n};\n\n<MediaManager queries={queries}>\n  <App />\n</MediaManager>\n```\n\n## Using slot component\n\nSlot component evaluates props which match keys defined in the initial queries\nobject and render the prop if the current media query is evaluated to true.\n\n```jsx\nimport React from 'react';\nimport { MediaSlot } from '@donovan-graham/react-media-match';\n\n<MediaSlot\n  mobile={key => <p key={key}>**Is mobile slot</p>}\n  tablet={key => <p key={key}>**Is tablet slot</p>}\n  desktop={key => <p key={key}>**Is desktop slot</p>}\n/>\n```\n\n## Using conditional component\n\nConditional component evaluates conditions of `is`, `not`, `any` and `none` against\nthe initial queries object keys; and returns its children if the condition is satisfied.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport { MediaCondition } from '@donovan-graham/react-media-match';\n\n<MediaCondition is=\"mobile\">\n  <p>Is mobile</p>\n</MediaCondition>\n\n<MediaCondition not=\"mobile\">\n  <p>Is not mobile</p>\n</MediaCondition>\n\n<MediaCondition anyOf={[\"mobile\", \"desktop\"]}>\n  <p>Any of mobile or desktop</p>\n</MediaCondition>\n\n<MediaCondition noneOf={[\"mobile\", \"desktop\"]}>\n  <p>None of mobile or desktop</p>\n</MediaCondition>\n```\n\n## Create your own custom components\n\n```jsx\nimport React from 'react';\nimport { MediaCondition } from '@donovan-graham/react-media-match';\n\nconst Mobile = ({children}) => <MediaCondition is=\"mobile\">{children}</MediaCondition>\n<Mobile>\n  <p>Is mobile</p>\n</Mobile>\n```\n\n## Using lower-level consumer component\n\nConsumer component provides the current state of media queries for fine grained control.\n\n```jsx\nimport React, { Fragment } from 'react';\nimport { MediaConsumer } from '@donovan-graham/react-media-match';\n\n<MediaConsumer>\n  {({ mobile, tablet, desktop }) => (\n    <Fragment>\n      {mobile && <p>mobile</p>}\n      {tablet || desktop && <p>anything but mobile</p>}\n    </Fragment>\n  )}\n</MediaConsumer>\n```\n","readmeFilename":"README.md"}