{"_id":"@bpierre/use-viewport","_rev":"1-c1f55bda5b82910a23085baf36195a48","name":"@bpierre/use-viewport","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@bpierre/use-viewport","version":"0.3.0","author":{"name":"Aragon Association","email":"legal@aragon.org"},"license":"MIT","main":"dist/index.js","module":"dist/use-viewport.esm.js","sideEffects":false,"typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch --transpileOnly","build":"tsdx build","test":"tsdx test","lint":"tsdx lint src --max-warnings 0 && tsc","prepare":"tsdx build","prepublishOnly":"git push && git push --tags","size":"size-limit","analyze":"size-limit --why"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"size-limit":[{"path":"dist/use-viewport.cjs.production.min.js","limit":"10 KB"},{"path":"dist/use-viewport.esm.js","limit":"10 KB"}],"dependencies":{"lodash-es":"^4.17.15"},"devDependencies":{"@size-limit/preset-small-lib":"^4.6.0","@types/lodash":"^4.14.161","@types/react":"^17.0.5","@types/react-dom":"^17.0.5","@typescript-eslint/eslint-plugin":"^4.3.0","@typescript-eslint/parser":"^4.3.0","eslint-config-react-app":"^5.2.1","eslint-plugin-prettier":"^3.1.4","husky":"^4.3.0","prettier":"^2.1.2","size-limit":"^4.6.0","tsdx":"^0.14.0","tslib":"^2.0.1","typescript":"^4.0.3"},"peerDependencies":{"react":"17.x"},"gitHead":"537acf68660adb939ead4f6eba8d95b4e68694fa","description":"[\"\"](https://www.npmjs.com/package/use-viewport) [\"\"](https://bundlephobia.com/result?p=use-viewport)","_id":"@bpierre/use-viewport@0.3.0","_nodeVersion":"16.7.0","_npmVersion":"7.20.3","dist":{"integrity":"sha512-JnNTBsjgsLxY2wIvsRyxbEEr58Ncm8ak7VPCg4pQc/dSn94uLMgjvM6Dmnq4XHUrFj2oJUvZGJ8rjMKnhEtL1Q==","shasum":"99a2d407cb61d1ace41358629ee53fcf316d2d2d","tarball":"https://registry.npmjs.org/@bpierre/use-viewport/-/use-viewport-0.3.0.tgz","fileCount":13,"unpackedSize":45194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKNuxCRA9TVsSAnZWagAAm6wP/3hK6wRPRYLlqaTsOYn1\nYZ2Gefl6gDqBSniaarf97lZhJ0SbtPfx+O9bS8/ZUeJJPFAUolt20Sbx9xHW\nK8XjJWQZ1SbMaJ41ijyDhtJn2PTLs3BW3tNOVzMaY+0x/C8mJgJw+pVQWtGy\nADn5qerzrXXyfcECrVtvy8MnbubLw/pDQuYeBHKjS37CxKI6tFS4TA82SzsX\nawL5+VN6cQAwEXrR8a01fNT6djR0IKf+78o/VZTtosV9v6K6dAlUEUlihttD\nuheQTNr43WVBh4iTkmaDL1HlFHBWeKxxC9F+TGnn/FGVMiNCWsNgXljAV5Qi\nC/EysFcgXzgfW8DNLu8yG01lrBMFojVJfkN2QSCrXcd6BhXTL1lvk4bA4BlW\nCK69kr+kfyQefD20ysvwNySrgnqw2gtZoo4MzC1C7UzhcAhDT6HpaytZAm3m\n79+drVrSDiob4xIY5m7VmFtjdC+MJ/Bk9wtKmaHy14wcrcab6uIrxASA9VjV\njrMQmgw2VeMngLzltmT3IG3ipkuMxnZhQT6dWBQUj6ZAxttrtwqNY302tqNt\niHH+8ehNnMlzbj1QJUoYt7sppSHNqu9X0w3IcXJ08E/unt8Jqq3MPyEdshdd\n4RWBooOmNOrdTmzO3wEAeKSuWHqjkokqelwFL76RPrNkrFK8tYzqfrvtCSCz\nTsXK\r\n=6XAd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4rhVwJBMuxYZLKL8UqI6ijgnsVfyi6XJXovwrD4yHnQIgIrYactcFY8UqUX9vii5XFRBboP9Ysh9cmvm4t9tDeIs="}]},"_npmUser":{"name":"bpierre","email":"hello@pierre.world"},"directories":{},"maintainers":[{"name":"bpierre","email":"hello@pierre.world"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-viewport_0.3.0_1630067633567_0.21374775007772584"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-27T12:33:53.509Z","0.3.0":"2021-08-27T12:33:53.815Z","modified":"2022-04-04T20:18:55.565Z"},"maintainers":[{"name":"bpierre","email":"hello@pierre.world"}],"description":"[\"\"](https://www.npmjs.com/package/use-viewport) [\"\"](https://bundlephobia.com/result?p=use-viewport)","author":{"name":"Aragon Association","email":"legal@aragon.org"},"license":"MIT","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\nApart from `children` it accepts the following props:\n\n##### throttle\n\nThe interval in ms for window updates. Defaults to `100`.\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"}