{"_id":"@kaliber/use-media-query","_rev":"42-74a17ad05e6b812eae3e72e76657e5ac","name":"@kaliber/use-media-query","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@kaliber/use-media-query","version":"1.0.0","keywords":["react","hook","hooks","media queries"],"license":"MIT","_id":"@kaliber/use-media-query@1.0.0","maintainers":[{"name":"kaliber-owner","email":"development@kaliber.net"},{"name":"daveykropf","email":"davey@kaliber.net"},{"name":"eecolor","email":"eecolor@gmail.com"},{"name":"pkuepers","email":"pkuepers@kaliber.net"},{"name":"larsvankleef","email":"spamlabtap@gmail.com"}],"dist":{"shasum":"4aa48bf6c04c26b174648c99c3008f24fb454b34","tarball":"https://registry.npmjs.org/@kaliber/use-media-query/-/use-media-query-1.0.0.tgz","fileCount":7,"integrity":"sha512-oXN1mAxkKrBOjDsSTNOmdhFPsSIHOXS25t3WEUS5XlExjgR0QoPPmGeu/xDpdTz0l00UuIhIQVm8mpo8YlihZQ==","signatures":[{"sig":"MEUCIQDVPrvijAkoZEQ86/aKBWsw1vtUExTyRayLUwEdqU1wIgIgS4zpbIg2G6TwkSh0V3n0B8XblkIdAU5/ii9Nsy0+BT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiej4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ4w//bnnki4eZs9YtgYbFULbrQLLFS/vR6y2ZLy6wSiYJFZNbxG+R\r\nZ4F3ZyT5S6oW7ZQLnyaD0IJLukxF0g5P2gWgMQ0+ZtRgo9pdOoZFB4V/o5oC\r\n2h5cNmK7Zn/6WWkgNazaLwN/0AVEMPBJTgSncNdvJgalCTt4qwL2cd+9QFbp\r\nX2s/DrDWzc1esQiiy9BKQahjd2K+p9BcfBBDObGMHtT5jEy/9EUfux76NT1m\r\nIktamtDJxDGlhd449tVFwPuZIIxncAKEM05cMVYCs+Jcj+0F3xFLJoN8OJRv\r\nWPtuuj2VZ3Q9gFMfqOfXM8Zjso+1gdDf9cdaod8snYh9oQTQNhVVGk8Ncy/Y\r\nWBJ30CksN9ArWqu8Ewc251UxzLzKrwf/e4WGzfKa6LLd5pj3UcouA4eIEloy\r\n8IZxxeVeJQGCxCJugRhNB4UwfPMLAvucMAMAzycvmn+9+TBDRn41ldl9Me6w\r\ntr1iDuAyebQKzNU12cyQcODqLd9doWwlZl6z6J8AULV0Gdm7R7AOjLO0wl7l\r\nA0G0m61/Eg6xDoCzWYVUO5oi+wyks+ytqtcrGuyJCXoV0YdQ682kojX2aWau\r\nbL3RHQc961buRMr+K2i8+u3WAr6Rhod64hb4IVMpBXR4DxXQkgOoOQ7umoTu\r\nYHC7yW65Y4FAttw64dZz9gsaXc9RvHodd3w=\r\n=78Hq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","private":false,"_npmUser":{"name":"pkuepers","email":"pkuepers@kaliber.net"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"https://github.com/kaliberjs/use-media-query.git","type":"git"},"description":"A hook that makes it easy to use a media query in React","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2021 kaliber.js\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","sideEffects":false,"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.0.0_1652178469686_0.7882199347492855","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@kaliber/use-media-query","version":"1.1.0","keywords":["react","hook","hooks","media queries"],"license":"MIT","_id":"@kaliber/use-media-query@1.1.0","maintainers":[{"name":"daveykropf","email":"davey@kaliber.net"},{"name":"eecolor","email":"eecolor@gmail.com"},{"name":"jerryduijm","email":"jduijm@kaliber.net"},{"name":"kaliber-owner","email":"development@kaliber.net"},{"name":"sielcken","email":"hsielcken@kaliber.net"},{"name":"nhoenderop","email":"nhoenderop@kaliber.net"},{"name":"erwin-kaliber","email":"ehaers@kaliber.net"},{"name":"janbru","email":"jbrunemann@kaliber.net"},{"name":"melissabos18","email":"mbos@kaliber.net"},{"name":"albertkaliber","email":"asmit@kaliber.net"},{"name":"hylco-kaliber","email":"hdouwes@kaliber.net"}],"dist":{"shasum":"3b38fd3de2f5305b34cd7dab7c438971834df480","tarball":"https://registry.npmjs.org/@kaliber/use-media-query/-/use-media-query-1.1.0.tgz","fileCount":7,"integrity":"sha512-egEb4VvR39a9ukMKs4jdtN7aupOEpIczsjn4aVDjrSc/GTIysDJ0TPTc2+rYkGwGX1EMr3sk8DnHtR1b2oZ+TQ==","signatures":[{"sig":"MEUCIHKe6ueO8fftwGl+IFuQnqq+IhM7CiSlwVUqy4JvjQNHAiEA2iGMtPe/dlaI+J3UBQuEU1zEXDxrw1XPZhP/52+AWgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4931},"main":"index.js","private":false,"_npmUser":{"name":"albertkaliber","email":"asmit@kaliber.net"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"https://github.com/kaliberjs/use-media-query.git","type":"git"},"description":"A hook that makes it easy to use a media query in React","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2021 kaliber.js\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","sideEffects":false,"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.1.0_1736929203983_0.05213427178739782","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@kaliber/use-media-query","version":"1.1.1","keywords":["react","hook","hooks","media queries"],"license":"MIT","_id":"@kaliber/use-media-query@1.1.1","maintainers":[{"name":"daveykropf","email":"davey@kaliber.net"},{"name":"eecolor","email":"eecolor@gmail.com"},{"name":"jerryduijm","email":"jduijm@kaliber.net"},{"name":"kaliber-owner","email":"development@kaliber.net"},{"name":"sielcken","email":"hsielcken@kaliber.net"},{"name":"nhoenderop","email":"nhoenderop@kaliber.net"},{"name":"erwin-kaliber","email":"ehaers@kaliber.net"},{"name":"janbru","email":"jbrunemann@kaliber.net"},{"name":"melissabos18","email":"mbos@kaliber.net"},{"name":"albertkaliber","email":"asmit@kaliber.net"},{"name":"hylco-kaliber","email":"hdouwes@kaliber.net"}],"dist":{"shasum":"da3168e1b04e456660b93402a8670b2fcb1f8cbf","tarball":"https://registry.npmjs.org/@kaliber/use-media-query/-/use-media-query-1.1.1.tgz","fileCount":7,"integrity":"sha512-D0LmdHlOFQHmhYUM149KIsh33QaNLkbVRKkpCF7NkL+pTmc3xkTZ/5Tz/s9MJ5JT/BhdqQCkVLO7CqR5QSBMrQ==","signatures":[{"sig":"MEUCICxLrQC0ovtdtMFPifyD4IlMOyj7zbfL25AWX/sLPlrYAiEAjhA63Cpl32yUNDatsrCAFDd33lXBQVG2nvXB1XOVqwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4900},"main":"index.js","private":false,"_npmUser":{"name":"albertkaliber","email":"asmit@kaliber.net"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"https://github.com/kaliberjs/use-media-query.git","type":"git"},"description":"A hook that makes it easy to use a media query in React","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2021 kaliber.js\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","sideEffects":false,"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.1.1_1737014545771_0.02887290660489561","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2022-05-10T10:27:49.582Z","modified":"2026-09-09T12:43:44.947Z","1.0.0":"2022-05-10T10:27:49.894Z","1.1.0":"2025-01-15T08:20:04.170Z","1.1.1":"2025-01-16T08:02:25.972Z"},"license":"MIT","keywords":["react","hook","hooks","media queries"],"repository":{"url":"https://github.com/kaliberjs/use-media-query.git","type":"git"},"description":"A hook that makes it easy to use a media query in React","maintainers":[{"email":"davey@kaliber.net","name":"daveykropf"},{"email":"ewestra@kaliber.net","name":"eecolor"},{"email":"jduijm@kaliber.net","name":"jerryduijm"},{"email":"development@kaliber.net","name":"kaliber-owner"},{"email":"nhoenderop@kaliber.net","name":"nhoenderop"},{"email":"jbrunemann@kaliber.net","name":"janbru"},{"email":"asmit@kaliber.net","name":"albertkaliber"},{"email":"mvanbrakel@kaliber.net","name":"mvanbrakel"},{"email":"Rvanschaik@kaliber.net","name":"r0h-oh"},{"email":"claan@kaliber.net","name":"1cln"},{"email":"mreimus@kaliber.net","name":"maart-22"},{"email":"ldavidsondescelles@kaliber.net","name":"yoreljenkins"},{"email":"mdevalk@kaliber.net","name":"mdevalk1983"},{"email":"guido.evertzen@gmail.com","name":"guido.evertzen"},{"email":"svroom@kaliber.net","name":"svroom-kaliber"},{"email":"tomharms93@proton.me","name":"tomharms"},{"email":"rinus.vh@hotmail.com","name":"rinus.vh"},{"email":"pgoddijn@gmail.com","name":"pgoddijn"},{"email":"jvankralingen@kaliber.net","name":"jvankralingen"}],"readme":"# @kaliber/use-media-query\nA hook that makes it easy to use a media query in React.\n\n## Motivation\nSometimes it's useful to render a different version of a component on different media. For instance: a navigation component can have wildly different implementations for mobile and desktop. This hook gives you the power to use media queries to trigger this behavior.\n\n## Installation\n\n```\nyarn add @kaliber/use-media-query\n```\n\nAdd the library to your `compileWithBabel` array:\n\n__`config/default.js`__\n```js\nmodule.exports = {\n  kaliber: {\n    compileWithBabel: [/@kaliber\\/use-media-query/]\n  }\n}\n```\n\n### Supporting older browsers\nTo support older browsers you will need to add some polyfills. When polyfilling for IE11 using polyfill.io, you need:\n\n- `matchMedia`\n- `MediaQueryList.prototype.addEventListener`\n- `MediaQueryList.prototype.removeEventListener`\n\n## Usage\n\n```jsx\nimport { useMediaQuery } from '@kaliber/use-media-query'\n\nfunction Component() {\n  const showDesktopNavigation = useMediaQuery('screen and (min-width: 48em)')\n\n  return (\n    <div className={styles.component}>\n      <header className={styles.header}>\n        {showDesktopNavigation\n          ? <HeaderDesktop items={menuItems} />\n          : <HeaderMobile items={menuItems} />\n        }\n      </header>\n    </div>\n  )\n}\n```\n\nPlease do refer to the example in the `/example` folder to see how you can avoid CLS and displaying the wrong menu for a frame.\n\n### Default values\n\n`useMediaQuery` only returns a non-null value after the first render, because the first render there's no information about the media query available yet. If you need a default value, you can add one using the __nullish coalescing operator__:\n\n```js\nconst showDesktopNavigation = useMediaQuery('screen and (min-width: 48em)') ?? true\n```\n\n### Indeterminate\n\nIf you want to display a waiting state while you wait for `useMediaQuery` to update, you can explicitly test against `null`:\n\n```js\nfunction Component() {\n  const isViewportMd = useMediaQuery('screen and (min-width: 48em)')\n  const indeterminate = isViewportMd === null\n\n  return (\n    <div className={styles.component}>\n      <header className={cx(styles.header, indeterminate && styles.indeterminate)}>\n        {/* ... */}\n      </header>\n    </div>\n  )\n}\n```\n\n---\n\n![](https://media.giphy.com/media/3yjYqt6EosROH9ZwFX/giphy.gif)\n\n## Disclaimer\nThis library is intended for internal use, we provide __no__ support, use at your own risk. It does not import React, but expects it to be provided, which [@kaliber/build](https://kaliberjs.github.io/build/) can handle for you.\n\nThis library is not transpiled.\n","readmeFilename":"readme.md"}