{"_id":"use-viewport","_rev":"38-fa0f9ae6dad05d313f9b7a6c3faef3a7","name":"use-viewport","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"use-viewport","version":"0.1.0","author":{"name":"Aragon Association","email":"legal@aragon.org"},"license":"AGPL-3.0","_id":"use-viewport@0.1.0","maintainers":[{"name":"evalir","email":"hi@enriqueortiz.dev"}],"dist":{"shasum":"ebbced088b5114c7c7995cfe7c7cc0a56027e77c","tarball":"https://registry.npmjs.org/use-viewport/-/use-viewport-0.1.0.tgz","fileCount":4,"integrity":"sha512-dKUMZTYcWqX2KgbOxsWuxXJFIuzhAC6/MZcYlOHwkrrOGiUuvex2icZ/nyY2XDbky9QLReoyS/R5L8w3WW25mw==","signatures":[{"sig":"MEUCIQCY0fzzFkFcv7oOQtInyO+vbfZjSCH6cn4FAC4UK6XMHAIgSgxZI+FUe17n8nnkPSUnaUpb+ljnSDfIBu7dVGpMuYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYs3PCRA9TVsSAnZWagAAFy8P/iQtD4TtCSPjPcS8ZB9b\nyPHkEr4kzE7o/jQZ/M0xG0EJwzW4msqmHi9SXZ0ZW7UlXUouveK85OHVgDzy\nKAMtMskTXmDFBBxA1y8qam6m59TRmkxik2mrL4gG9xmzXbsmWNvrDtb98JqQ\njYwd/e8LkBW3zOUwyCWrjkjc9HcUnLa5iZntSzH4l+pJdUBACv92tmccA3yj\nY7UJ6vvrAl2RAlvMXuQu10XJAEfC+yYBPC88X5wUddn3QqFA07QVtkQMwdnl\nRXlhhHDXqLle1cgag3SylYn27eISbPSDFaEsiTZehjfd9sxf3rZ6UVVGvog8\nAimQ9sOKP6BNHvkJKvUC5t0MGNMNbMz+3c5S6l2V1BmML0aujnsrdIshFlU0\nHf7O/0hk/77SjZRBLe+x1gudkB7vGeHACuy/uyEuOhbY8jW3TOXttBwnec+i\ndPYFhnfSthaHrCTDvRYXhYtoWIF26Mu+ayI9U/O3dtKE8XgkAF2AmeeUo6F+\n3BjW0Vao53ppmbjoAifCQD8w8yeULjhjcd1Y95ifQ5DduXjx+VTw2iPw1PFS\n/YVP258Y/TvMLiG3hjBNccTO+DbcSuXQrwOS3aAIueW7hffDD7+P9ZkKiBwL\nJQfCMp8XS0vkpx4+9B1LRDlnUTFwd0bFsdkumZ562qIiuvtz+t1ZMsH1uy0Z\n3SyO\r\n=kX9x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.js","gitHead":"f613c5e3868de13622b8c89a62138f042e2eaec6","scripts":{"dev":"yarn rollup --config --watch","lint":"yarn eslint ./src","test":"yarn lint","build":"yarn rollup --config","prepare":"rm -rf ./dist && yarn build","prepublishOnly":"git push && git push --tags"},"_npmUser":{"name":"evalir","email":"hi@enriqueortiz.dev"},"_npmVersion":"6.11.3","description":"[\"\"](https://www.npmjs.com/package/use-viewport) [\"\"](https://bundlephobia.com/result?p=use-viewport)","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"prop-types":"^15.7.2","lodash.throttle":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.8.0","rollup":"^1.29.1","prettier":"^1.19.1","@babel/cli":"^7.8.3","@babel/core":"^7.8.3","babel-eslint":"^10.0.3","builtin-modules":"^3.1.0","@babel/preset-env":"^7.8.3","eslint-plugin-node":"^11.0.0","@babel/preset-react":"^7.8.3","@rollup/plugin-json":"^4.0.1","eslint-plugin-react":"^7.18.0","rollup-plugin-babel":"^4.3.3","eslint-plugin-import":"^2.20.0","rollup-plugin-terser":"^5.2.0","eslint-plugin-promise":"^4.2.1","eslint-config-prettier":"^6.9.0","eslint-config-standard":"^14.1.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-standard":"^4.0.1","@rollup/plugin-commonjs":"^11.0.1","eslint-plugin-react-hooks":"^2.3.0","@rollup/plugin-node-resolve":"^7.0.0","eslint-config-standard-react":"^9.2.0","@babel/plugin-proposal-class-properties":"^7.8.3"},"peerDependencies":{"react":"^16.12.0"},"_npmOperationalInternal":{"tmp":"tmp/use-viewport_0.1.0_1583533519274_0.4079901585232355","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"use-viewport","version":"0.2.0","author":{"name":"Aragon Association","email":"legal@aragon.org"},"license":"MIT","_id":"use-viewport@0.2.0","maintainers":[{"name":"evalir","email":"hi@enriqueortiz.dev"}],"dist":{"shasum":"0a5971515de2704bdceb0a7ff998bc9cd14eb039","tarball":"https://registry.npmjs.org/use-viewport/-/use-viewport-0.2.0.tgz","fileCount":7,"integrity":"sha512-D3bY0Co9ZUdXCQGMTaUQZhLgpWpXFw2xbHDXccxtHyGch5oY0OVprQldEm2U5CwUuNbKMNW9n8Kyj8AlbbY4yQ==","signatures":[{"sig":"MEQCIAxynQvcCiLwJamRFRQ6C5Jw6LZ7wG2hM069daFCvE/yAiBLHVHntGtT/nKO8U1OfWz6awHZVFJGaY1UyROG8zzOyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2/OlCRA9TVsSAnZWagAAmnIP/2UXv0QQx8eogoYR/a0u\nAqCctRpHTh3XCWRY85YZQfWXQg+OCiN6hPkPs6l4TUBzRj+CnMwj5trhZBY+\nAJ9yBP6sEqBYaG+fEKqGvQEKkyTSJ7esDRNhFqUjgspA8cawFUW+fKBasssw\nvIlv2ZWrRaJrDxsZTUbywnNlU7twc+f1M3ISpA0R12y4vbuPFWBAh1NLhvzS\ngjw16CzZoH7s9s1xFxzCTC/DqytkV3XKPxpEqM1XXsEKAsvi1qTHS6AlPLfq\nEIMrg97n3h3s9HojgY5RDLUmQ4wZmfY8E07ZT1ixdmnJAK2X8/BYd8vkRaWZ\nW9ycI9whP3D0K0v6hYYeoSDqnYYRSHCB1I9WkWJshMe/bAHVw4F5mChSSmOk\nkMEwrzH1h6RY/NqpY+yehiKV5KB809ESKIslPwmZtQRUgfpfgrDASjOEpYpK\nmEkQgMo5Pt3ta5nEN5hVc/JX1D6FRsRfkKpWA/llAsePdnRx7FHIUCLSxzj4\nAHkmli5u96o4v0dhcEcLplCwJSqWOXxvDwjt8cwMwWgV6XYxVF0iq3MXWLog\nfa0IWDXZDsQ7WMmD2qL9a73H56ghrubWm8MHnlAektwjOZ+u8HLZO+UYx7MQ\n/kRUk4fuUdYTM/uq1PNWSlxvXiqvnwpCeYwlnhaprPSsCo4zfhgQZyjeO44A\nrOpU\r\n=2nl8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","module":"dist/index.js","gitHead":"759b400221c005e868565d797f1a2aadbfc7818b","scripts":{"dev":"yarn rollup --config --watch","lint":"yarn eslint ./src","test":"yarn lint","build":"yarn rollup --config","prepare":"rm -rf ./dist && yarn build","prepublishOnly":"git push && git push --tags"},"_npmUser":{"name":"evalir","email":"hi@enriqueortiz.dev"},"_npmVersion":"6.14.1","description":"[\"\"](https://www.npmjs.com/package/use-viewport) [\"\"](https://bundlephobia.com/result?p=use-viewport)","directories":{},"sideEffects":false,"_nodeVersion":"13.3.0","dependencies":{"prop-types":"^15.7.2","lodash.throttle":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.8.0","rollup":"^1.29.1","prettier":"^1.19.1","@babel/cli":"^7.8.3","@babel/core":"^7.8.3","babel-eslint":"^10.0.3","builtin-modules":"^3.1.0","@babel/preset-env":"^7.8.3","eslint-plugin-node":"^11.0.0","@babel/preset-react":"^7.8.3","@rollup/plugin-json":"^4.0.1","eslint-plugin-react":"^7.18.0","rollup-plugin-babel":"^4.3.3","eslint-plugin-import":"^2.20.0","rollup-plugin-terser":"^5.2.0","eslint-plugin-promise":"^4.2.1","eslint-config-prettier":"^6.9.0","eslint-config-standard":"^14.1.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-standard":"^4.0.1","@rollup/plugin-commonjs":"^11.0.1","eslint-plugin-react-hooks":"^2.3.0","@rollup/plugin-node-resolve":"^7.0.0","eslint-config-standard-react":"^9.2.0","@babel/plugin-proposal-class-properties":"^7.8.3"},"peerDependencies":{"react":"^16.12.0"},"_npmOperationalInternal":{"tmp":"tmp/use-viewport_0.2.0_1585182725418_0.9296217152120316","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-03-06T22:25:19.274Z","modified":"2025-05-09T12:19:37.142Z","0.1.0":"2020-03-06T22:25:19.428Z","0.2.0":"2020-03-26T00:32:05.938Z"},"author":{"name":"Aragon Association","email":"legal@aragon.org"},"license":"MIT","description":"[\"\"](https://www.npmjs.com/package/use-viewport) [\"\"](https://bundlephobia.com/result?p=use-viewport)","maintainers":[{"email":"devops-master@aragon.org","name":"devops-master"},{"email":"jjavieralvarezrodriguez@gmail.com","name":"jjavieralv"},{"email":"devops@aragon.org","name":"arabot-1"},{"email":"npm@brettsun.com","name":"sohkai"},{"email":"hi@enriqueortiz.dev","name":"evalir"}],"readme":"# 🌅 useViewport()\n\n[\"\"](https://www.npmjs.com/package/use-viewport) [\"\"](https://bundlephobia.com/result?p=use-viewport)\n\nuseViewport() provides a hook with the current window size and convenient functions to help building responsive apps.\n\n## Usage\n\nAdd it to your project:\n\n```console\nyarn add use-viewport\n```\n\nUse it in your React app:\n\n```jsx\n// App.js\n\nimport React from 'react'\nimport { ViewportProvider, useViewport } from 'use-viewport'\n\nfunction App() {\n return (\n \n

useViewport

\n \n \n )\n}\n\nfunction ViewportSize() {\n const { width, height, within, below, above } = useViewport()\n\n return (\n
\n {below('medium') &&
small
}\n {within('medium', 'large') &&
medium
}\n {above('large') &&
large
}\n

\n Current screen width is {width}px and the height is {height}px\n

\n
\n )\n}\n\nexport default App\n```\n\n## API\n\n### <ViewportProvider />\n\nThis is the provider component. It should be placed above any component using `useViewport()`.\n\n### useViewport()\n\nThis is the hook to be used throughout the app.\n\nIt takes no parameters and returns the following:\n\n- `width`: The current screen width.\n- `height`: The current screen height.\n- `within(min, max)`: A function that returns `true` if the viewport width is between `min` and `max`. `min` and `max` can be any number, or one of the available breakpoints. If -1 is passed as min or max, there will be no minimum or maximum.\n- `above(x)`: Returns `true` if the viewport width is above `x`, `false` otherwise. \n- `below(x)`: Returns `true` if the viewport width is below `x`, `false` otherwise. \n- `breakpoints`: An object that contains the number values of the different recommended breakpoints. It can be useful to set these values in CSS, for example. \n","readmeFilename":"README.md"}