{"_rev":"3-aaf9e5b649fc9f5446b82e4608bbb011","time":{"created":"2022-04-11T19:30:35.529Z","0.14.1":"2022-04-09T19:43:19.314Z","modified":"2022-04-11T19:30:35.890Z","0.14.3":"2022-04-10T05:49:53.680Z","0.14.4":"2022-04-11T19:30:35.728Z"},"_id":"@danimadmolil/match-media","name":"@danimadmolil/match-media","dist-tags":{"latest":"0.14.4"},"versions":{"0.14.4":{"name":"@danimadmolil/match-media","version":"0.14.4","description":"React hooks for theme-ui breakpoints","source":"src/index.ts","main":"dist/danimadmolil-match-media.cjs.js","module":"dist/danimadmolil-match-media.esm.js","author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/system-ui/theme-ui.git"},"scripts":{},"publishConfig":{"access":"public"},"devDependencies":{"@theme-ui/core":"0.14.1","@theme-ui/css":"0.14.1","react":"^17.0.1"},"peerDependencies":{"@theme-ui/core":">=0.6.0","@theme-ui/css":">=0.6.0","react":">16"},"gitHead":"621199460fa3bdb0100748441e62517b7529b8c8","types":"./dist\\danimadmolil-match-media.cjs.d.ts","bugs":{"url":"https://github.com/system-ui/theme-ui/issues"},"homepage":"https://github.com/system-ui/theme-ui#readme","_id":"@danimadmolil/match-media@0.14.4","_nodeVersion":"17.3.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-K4Ru4lNa3+BWA4JGEZ60grtxhwgSBLreg81uRJidYnTyg2EJBpNpLI1T4XazJiIGXymr4adtE4D5lz5HpoNGYQ==","shasum":"83d18771a6dec281dc25fba3c73d27f3ffca0906","tarball":"https://registry.npmjs.org/@danimadmolil/match-media/-/match-media-0.14.4.tgz","fileCount":12,"unpackedSize":19542,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC56N0VNdciDsia1dJpdmFZuKGOq+O6jRo6PFMQ8izvRwIhAMKm8WNllCroJfUEGGxKyW0YuppKqnTKAvHey58tSe7h"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVIHbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLcQ//aoOk2tbCCND/NxNhUbazAD5Bn5f5JT/Uj+FJ+Kad0RkF7zC+\r\nQVbfSAAbhDNLr8AZjfjoEJApIseAhlU0t+Vp0dOKCeByGB21JLVcW2vPfomh\r\nxrxGFvQsW7U7mTW5ImcBkc801GT+74S1xWmS0SHYBKSbU+dnClALST9uook0\r\nvUaVcGdRiHPG+3Zaw6dJbyojs4P/gLQuM2NLFZSbzZ4FoUfGe3ovFubPlutm\r\nsw2Sn/n789CSJZMlLQpIGt17ZpGqNrkKD+asB2tVPe+4VwlWToSN9NxT/yWL\r\nmGovyHLt1IL0CKEFfJbnhRt4KQcp5cadigLKF2f/emqcux5ifsUTF9BawzDp\r\nxr++dD/o+uewVYnnt/Av7cO1L29pYdaVbNJQ648qP7ihjWzTtDD8aAMUaohN\r\ncc5YGfTKnsCRhXS3hVBG3tWc0HHodJ+cKqHumKrFKmWfcQbOCcRwhoK6qmh1\r\nNZZNFRyc2fa3l9KOrHC5am59AAIU4ivfe+CFGrLRklDZImdDozb/cKKuvvD2\r\n1d8aEYArNlzHDy+w66G/ChCRpMPGR7ba9XJgHs3VD8PsNkWy90473dWFyipC\r\nHoPm9uxMtWct3GdaYISCXSNnGQSp1u+h40ln/ltQg1XxqBo4++mQ8TnCjOiq\r\n6FEIJn+DUs5k5P7wmDp+ieTWtdTDYiRB6bE=\r\n=ui+f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"danimadmolil","email":"dani.madmolil@gmail.com"},"directories":{},"maintainers":[{"name":"danimadmolil","email":"dani.madmolil@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/match-media_0.14.4_1649705435582_0.0764806310491506"},"_hasShrinkwrap":false}},"maintainers":[{"name":"danimadmolil","email":"dani.madmolil@gmail.com"}],"description":"React hooks for theme-ui breakpoints","homepage":"https://github.com/system-ui/theme-ui#readme","repository":{"type":"git","url":"git+https://github.com/system-ui/theme-ui.git"},"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"bugs":{"url":"https://github.com/system-ui/theme-ui/issues"},"license":"MIT","readme":"# @theme-ui/match-media\r\n\r\nReact hooks for referencing theme-ui breakpoints.\r\n\r\n```sh\r\nnpm i @theme-ui/match-media\r\n```\r\n\r\n## Usage\r\n\r\nThis package provides two React hooks `useResponsiveValue` and `useBreakpointIndex` for referencing responsive values outside of the `sx` prop.\r\nNote that this is a client-side-only, JavaScript solution.\r\n\r\n```js\r\nimport { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media'\r\n\r\nconst MyComponent = () => {\r\n  // Return literal values:\r\n  const color = useResponsiveValue(['red', 'green', 'blue'])\r\n  // Or provide a function to access theme values:\r\n  const themeColor = useResponsiveValue((theme) => [\r\n    theme.colors.red,\r\n    theme.colors.green,\r\n    theme.colors.blue,\r\n  ])\r\n  // `useBreakpointIndex` returns the index of the currently matched media query:\r\n  const index = useBreakpointIndex()\r\n\r\n  return (\r\n    <div>\r\n      The current color is: {color}, and the current index is: {index}\r\n    </div>\r\n  )\r\n}\r\n```\r\n\r\n### Server side rendering\r\n\r\nEach hook also accepts an options object, used to set a default breakpoint index when rendering on the server.\r\n\r\n```js\r\nimport { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media'\r\n\r\nconst MyComponent = () => {\r\n  const color = useResponsiveValue(['red', 'green', 'blue'], {\r\n    defaultIndex: 1,\r\n  })\r\n  const index = useBreakpointIndex({ defaultIndex: 0 })\r\n\r\n  return (\r\n    <div>\r\n      The current color is: {color}, and the current index is: {index}\r\n      // Gatsby will output: // The current color is: green, and the current index\r\n      is: 0\r\n    </div>\r\n  )\r\n}\r\n```\r\n\r\nEach hook uses `breakpoints[0]` by default, if not specified.\r\n\r\n```js\r\nimport { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media'\r\n\r\nconst MyComponent = () => {\r\n  const color = useResponsiveValue(['red', 'green', 'blue'])\r\n  const index = useBreakpointIndex()\r\n\r\n  return (\r\n    <div>\r\n      The current color is: {color}, and the current index is: {index}\r\n      // Gatsby will output: // The current color is: red, and the current index\r\n      is: 0\r\n    </div>\r\n  )\r\n}\r\n```\r\n","readmeFilename":"README.md"}