{"_id":"react-scrollbar-size","_rev":"27-190bba29a7d50e7c59d85878fa5aade8","name":"react-scrollbar-size","description":"React hook to calculate the size of browser scrollbars","dist-tags":{"latest":"5.0.0","rc":"4.0.0-rc.0"},"versions":{"0.1.0":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"0.1.0","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","dependencies":{"babel-runtime":"^6.23.0","lodash.isequal":"^4.5.0","react":"^15.4.2","react-event-listener":"^0.4.3"},"_id":"react-scrollbar-size@0.1.0","scripts":{},"_shasum":"14119ccdf9d13aa02cbc4d1aec3417ac4d2adb8b","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.4.0","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"shasum":"14119ccdf9d13aa02cbc4d1aec3417ac4d2adb8b","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-0.1.0.tgz","integrity":"sha512-lvV9/uLpn27dhTRPfdIQ75dHZwvnS0jyt+bCp88/JSh5bSpVQi1dpds2KKIHusutH2HeXovOVRPk4thWQQPnnA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5Lmgag8Ok+M36Qn4E/oEPJ9C0EiOm1YOMRy7HGloLxwIhAKPwE8y+a1a0WtjXStJ25wnwXpgsvEKC0agBRc+tWTBN"}]},"maintainers":[{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-scrollbar-size-0.1.0.tgz_1490468777484_0.8337374427355826"},"directories":{}},"1.0.0":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"1.0.0","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","dependencies":{"babel-runtime":"^6.23.0","lodash.isequal":"^4.5.0","lodash.throttle":"^4.1.1","prop-types":"^15.5.8","react":"^15.5.4","react-event-listener":"^0.4.5"},"_id":"react-scrollbar-size@1.0.0","scripts":{},"_shasum":"2ca80e05c2ce4265a360fc4c8b309b6a4fec517f","_from":".","_npmVersion":"4.5.0","_nodeVersion":"7.7.3","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"shasum":"2ca80e05c2ce4265a360fc4c8b309b6a4fec517f","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-1.0.0.tgz","integrity":"sha512-W+j5dMdU0xbqUCGp8859/tqd0aCTGBW1xl37xEHhEyCK3mL6B+sRpUlX2vbhBN9+q3wDG/hLzjAnLvif++3lbg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0xiKpF/z5TyONVyW1dLWrSmwwkOewrRQ1O6BAPb4AtAiEA1GQDkfL4IMFx+T/8paS7Uk+QgZh6CrRCMZUVBjsNaP4="}]},"maintainers":[{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-scrollbar-size-1.0.0.tgz_1492459758354_0.34165919525548816"},"directories":{}},"1.0.1":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"1.0.1","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","dependencies":{"babel-runtime":"^6.23.0","lodash.isequal":"^4.5.0","lodash.throttle":"^4.1.1","prop-types":"^15.5.8","react":"^15.5.4","react-event-listener":"^0.4.5"},"_id":"react-scrollbar-size@1.0.1","scripts":{},"_shasum":"a28c8d82f922c9342b033addcb0d2539b394f63e","_from":".","_npmVersion":"4.5.0","_nodeVersion":"7.7.3","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"shasum":"a28c8d82f922c9342b033addcb0d2539b394f63e","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-1.0.1.tgz","integrity":"sha512-LhBxKXvXX3Wl/rJyW0ifyIzEK36RhQarZkDNhcy5vNLa5yLcQl8azeV3Fw+H+LYhlJLWH1gNiWppozp+urybBQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPo5opF3RzC+SWcFkNlMWYq5ibrbQuOZ4hFYm0fs+oEAiAEgdRYN5ind6RUA7xfzvcA/OPF7GQ+9vs6Qw8AttUR6w=="}]},"maintainers":[{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-scrollbar-size-1.0.1.tgz_1493247189209_0.7670347644016147"},"directories":{}},"1.0.2":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"1.0.2","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","dependencies":{"babel-runtime":"^6.23.0","lodash":"^4.17.4","prop-types":"^15.5.10","react":"^15.5.4","react-event-listener":"^0.4.5"},"_id":"react-scrollbar-size@1.0.2","scripts":{},"_shasum":"1bfda0595223feb75edf5cdc6d0f062f3221ff4e","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"shasum":"1bfda0595223feb75edf5cdc6d0f062f3221ff4e","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-1.0.2.tgz","integrity":"sha512-Ure3d3bFyvsSmdOW8GqDpnGLT+KozYBEBd5yHq4HzRJ7GPmFe8xcNmfiRd+u2qvkyA0YLKuFnvI1hibDkrp9Nw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCw3uDPDK1a5PfvxqRZSXZKpJT7OyS16qstFnP6BulKVQIgYnexLCkp3potbl4qPLUV+ynIWuuEroxBUnT5/LaQcSA="}]},"maintainers":[{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size-1.0.2.tgz_1495982519422_0.3861726806499064"},"directories":{}},"2.0.0":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"2.0.0","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"lodash":"^4.17.0","react":"^15.5.0"},"dependencies":{"babel-runtime":"^6.23.0","prop-types":"^15.5.10","react-event-listener":"^0.4.5"},"_id":"react-scrollbar-size@2.0.0","scripts":{},"_shasum":"611215f4105db28f1f56ccace627c3fce137a2f3","_from":".","_npmVersion":"4.6.1","_nodeVersion":"6.10.3","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"shasum":"611215f4105db28f1f56ccace627c3fce137a2f3","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.0.0.tgz","integrity":"sha512-27/rUespaa42FN6SJeh2z1emRtLTwZEjwp1fQBvs99gmF9xgHIQaCOynWFKl9r0JRSJ+9Tn42BsiISb1Hf6FkA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICC5oIc23VLi9e2niPBr81XwSBZ6GTKLyr8+qrrizyH9AiEA6UqJ08e3heZwI3wi2ns1ZHzw2r7es6Uws+ZjYhnKxSU="}]},"maintainers":[{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size-2.0.0.tgz_1496158917423_0.1271823993884027"},"directories":{}},"2.0.1":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"2.0.1","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"lodash":"^4.17.0","react":"^15.5.0"},"dependencies":{"babel-runtime":"^6.23.0","prop-types":"^15.5.10","react-event-listener":"^0.5.0"},"_id":"react-scrollbar-size@2.0.1","_npmVersion":"5.3.0","_nodeVersion":"6.11.0","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"integrity":"sha512-KKx5TZYgzrbAr+YFKPxllFq/571rkkUGbjOgfsIv9wc/d9+/pJlQ1jUEppYlQ+62EDU5bUZXIbxW3jIWKhJs7Q==","shasum":"fc13631d27efc93d7a1f40383b375dc449ebfac4","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtqfl7rsqhQCbZQZsckdOzxc8slSKS9SS00xzf5zEMegIgdlB0Pu4CLfvflinOR67JLAiegp8g86uZ79YmOU7ZwPY="}]},"maintainers":[{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size-2.0.1.tgz_1505858753190_0.7806971680838615"},"directories":{}},"2.0.2":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"2.0.2","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"lodash":"^4.17.0","react":"^15.3.0 || ^16.0.0"},"dependencies":{"babel-runtime":"^6.23.0","prop-types":"^15.5.10","react-event-listener":"^0.5.0"},"_id":"react-scrollbar-size@2.0.2","_npmVersion":"5.3.0","_nodeVersion":"6.11.3","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"integrity":"sha512-scpDs2PZFf9CJteBeDu7jkk7s+YX06Si4rQGVHsH6vjR/p7417q1Jv5SpOblLLesOgNrfWekwoHQG1g0/p3tvw==","shasum":"237dd091fa39dec8e3a6f720807787703c5ebf9e","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0++/vDhVT7mLatwhIuW/1W/wYAVex7ce0fac1n8541gIhALRjT23bZZepZb1F2hI1VdDmauZwalnTXq++vwde+zYS"}]},"maintainers":[{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size-2.0.2.tgz_1507257485055_0.4005704519804567"},"directories":{}},"2.1.0":{"name":"react-scrollbar-size","author":{"name":"STORIS"},"version":"2.1.0","description":"React component to calculate the size of browser scrollbars","main":"./index.js","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"react":"^15.3.0 || ^16.0.0"},"dependencies":{"babel-runtime":"^6.26.0","prop-types":"^15.6.0","react-event-listener":"^0.5.1","stifle":"^1.0.2"},"_id":"react-scrollbar-size@2.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"dist":{"integrity":"sha512-9dDUJvk7S48r0TRKjlKJ9e/LkLLYgc9LdQR6W21I8ZqtSrEsedPOoMji4nU3DHy7fx2l8YMScJS/N7qiloYzXQ==","shasum":"105e797135cab92b1f9e16f00071db7f29f80754","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5bLVNXQgdefp5OS61WPWDPT6Ab9srn9A1IDY2/GFfaQIgbqaSe9wzJFyrgRXVmI+glsF3OqRKwYhWuE71Tb7Uhs4="}]},"maintainers":[{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size-2.1.0.tgz_1517432183249_0.9017003409098834"},"directories":{}},"3.0.0-rc.0":{"name":"react-scrollbar-size","version":"3.0.0-rc.0","description":"React component to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"STORIS"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0"},"dependencies":{"lodash.debounce":"^4.0.8"},"readme":"# React-Scrollbar-Size\n[![STORIS](https://circleci.com/gh/STORIS/react-scrollbar-size.svg?style=svg)](https://app.circleci.com/pipelines/github/STORIS/react-scrollbar-size?branch=master)\n[![Downloads](https://img.shields.io/npm/dm/react-scrollbar-size)](https://www.npmjs.com/package/react-scrollbar-size)\n\nReact-Scrollbar-Size is a React component designed to calculate the size of the user agent's horizontal and vertical scrollbars.\nIt will also detect when the size of the scrollbars changes, such as when the user agent's zoom factor changes.\n\n## Installation\nReact-Scrollbar-Size is available as an [npm package](https://www.npmjs.com/package/react-scrollbar-size):\n\n```sh\n$ npm install --save react-scrollbar-size\n```\n\n## Usage\n\n### Props\n| Name | Description |\n| ---- | ---- |\n| `onChange` | Callback which will fire when the scrollbar sizes change. |\n\nThe callback accepts an object which will be updated with the following properties:\n\n| Name | Description |\n| ---- | ---- |\n| `width` | The current width of the vertical scrollbar. |\n| `height` | The current height of the horizontal scrollbar. |\n\n## Examples\nTo see a live example, follow these [instructions](https://github.com/STORIS/react-scrollbar-size/blob/master/example/README.md).\n\n### TypeScript\n```tsx\nimport React, { CSSProperties, FunctionComponent, useState } from 'react';\nimport ScrollbarSize from 'react-scrollbar-size';\n\nconst styles: CSSProperties = {\n margin: '1rem',\n textAlign: 'center',\n};\n\nconst ScrollbarSizeDemo: FunctionComponent = () => {\n const [currentHeight, setHeight] = useState(0);\n const [currentWidth, setWidth] = useState(0);\n\n const scrollbarSizeChange = ({ height, width }: ScrollbarSizeChangeHandlerParams) => {\n if (height !== currentHeight) {\n setHeight(height);\n }\n\n if (width !== currentWidth) {\n setWidth(width);\n }\n };\n\n return (\n
\n

React Scrollbar Size Demo

\n

Tip: Change browser zoom level to see scrollbar sizes change.

\n \n

\n {`The current height of the scrollbar is ${currentHeight}px.`}\n
\n {`The current width of the scrollbar is ${currentWidth}px.`}\n

\n
\n );\n};\n```\n\n### JavaScript\n```jsx\nimport React, { useState } from 'react';\nimport ScrollbarSize from 'react-scrollbar-size';\n\nconst styles = {\n margin: '1rem',\n textAlign: 'center',\n};\n\nconst ScrollbarSizeDemo = () => {\n const [currentHeight, setHeight] = useState(0);\n const [currentWidth, setWidth] = useState(0);\n\n const scrollbarSizeChange = ({ height, width }) => {\n if (height !== currentHeight) {\n setHeight(height);\n }\n\n if (width !== currentWidth) {\n setWidth(width);\n }\n };\n\n return (\n
\n

React Scrollbar Size Demo

\n

Tip: Change browser zoom level to see scrollbar sizes change.

\n \n

\n {`The current height of the scrollbar is ${currentHeight}px.`}\n
\n {`The current width of the scrollbar is ${currentWidth}px.`}\n

\n
\n );\n};\n```\n\n## License\nThis project is licensed under the terms of the\n[MIT license](https://github.com/STORIS/react-scrollbar-size/blob/master/LICENSE).\n","readmeFilename":"README.md","_id":"react-scrollbar-size@3.0.0-rc.0","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-5k044nutQ+bu36qN80YwKmuDJtfOoyvgozX2cXgw1ZFMnSVjBMcaUR9Bj66S6alNucyV4DKIv2GZS0fM5WdmYg==","shasum":"b23245b31c7bafa635ca9eef334cac278f4dc6c8","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-3.0.0-rc.0.tgz","fileCount":8,"unpackedSize":14027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEzflCRA9TVsSAnZWagAA+LIP/RsoZtAY5P5nvTCyHb5h\nuM2Ar244bEnUhdYK3A/yePnn2KWfsMzpSJTchc0ckgMQKo3tS1ERZyBTjVbo\nZSIxaXctzxlyPXQoKfvDTv5bsPCkZlp+XpbkhNKk7k+80ER9UVlAP/FaoT+L\nNM9oScO1dtYbAubJxNzI8ym3QwLSVOTYBSHPbcjtawVvhSHG2aY781sEqkYd\nxsZTd4jcvzq9lFAQMdV8oHOIcN1njJsV7F20UxAdJTET2fRuOPNDoDdTbnOc\n5NtkKYasIf+6Hk8/Nlp03AcUepaj8ePHzCWapPrX9URlBBY/iDCMh65ZRXvE\nEgeMR/9P/OtiaLZqdSIshl4spRvNO+i8Eae0bvgRLGABQHufggjP4mFL5Tq1\npLAsdhXwFoAln9CDRIstrmk7KjX/sytSweF2EZ/mG0Tff2JGEbx4TJIPgL9l\nNBiOlRvw8/IuKmvi2VSdShIOTBo69HJ/J34g4kQ3gCNNW0ukomyeRhDKWqCW\nFSXP2DC+9Y4GMYlXkbaalWH0NbSmIDLBGpM6Kslg3MN/pBQK6r3EZVm+E951\nJI94mcPaL5bjVfT8IZXDZ0b+JgctKlaaVp6fZpUAnYAe0Wyn/MkBcn8kL5Ij\nL8JMD/RFxZAbo9V+mPAKarKaqqPGV+5CXyy4L3+igge/OthQu2lyvPbLSlLv\n7b4H\r\n=69fL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGB1fhUYUJSOXqh++nPpzawgCeTcjz1WQntttax14CooAiEAshGJijE79O4m+sPMTpD3ZQRln3VRkvtDTyakX81/1oM="}]},"maintainers":[{"email":"kgreg80@gmail.com","name":"kgregory"},{"email":"kat@storis.com","name":"kthompson23"},{"email":"mck321@gmail.com","name":"shawnmcknight"}],"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_3.0.0-rc.0_1595095013185_0.6114055308258886"},"_hasShrinkwrap":false},"3.0.0":{"name":"react-scrollbar-size","version":"3.0.0","description":"React component to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"STORIS"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0"},"dependencies":{"lodash.debounce":"^4.0.8"},"_id":"react-scrollbar-size@3.0.0","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-O70QYamsXcAJx7+5MArbhNCZUDAEtkC/ub4hFN7ViCb+euxsRLd/wQlQPXnUNQMVBKhwoPzi9FYrfeF5jqiZ6g==","shasum":"4e3b84d454b5c134b9b623624ecb95ff2d319bb8","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-3.0.0.tgz","fileCount":8,"unpackedSize":14410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfE31OCRA9TVsSAnZWagAADDEQAJhrdzSaSDE/KSUgAs6j\nKyY6rJFb7uwhyU6R8hFCPQVENwRIfNWylm5ug9JFA+fETyXx+zvF8dq3rRaJ\n5QVsWBIkgddcO1Zifr8RsiSNw0TP8CfjgWDuwRw/pFz/sHLhdz9gJj5rByYc\n4BRv1aieftevZecOOm5jDAHPZ3jUxPA/L0I3PPzsI3lEfkiUL9hORqrjnqqx\nS+0QYsFx1WM/HNjzrJA6A9L9vtPqYuifToNpw51OhcJd8Gw9mRDr693lfTqo\nmEV1ayEb0ZeMeNvbZ6znp0UGJSplkFteiHBPfCVNHY42ksaKBmEjsPu9BXjp\nVxyvchXUh7fNw6VvC9rnAaud0unbLaLM+zS980Umt22QTQYuAkT4UM8AiKWi\nj5QwNVzgoEvjbk52HwempJNe4oyyI+42nmK36kFARpWDSCOUZ43TTw453zqY\nUpK8JaGlkAFk7UfXDCYK7Zb7hKIgyvnRODCSZJPxa539j3SWO9/IOfYwMD/P\nzbdxDpMQAyc359ywWEW+CJKnfGd3pIuz7Y0oh2SxuQB86P3SihQfQlspQmlC\nS/lGDn6NuHdipsvPS/QlPMUiZ7W3idNyLEfhy4zkwPapwD/n89AX9jH0x6z6\n21VHu9Vs7P5w+ZIKldz82yhguCH7UI1f5GrZ4PnkIbIg6dtenVdGm69DNmI+\nAhXN\r\n=7H6I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDckD/L0fPXqKtVpji56ezbNnnTqrNNza2yWABQBOu5FwIhAIHaozS+K94vVVLTIzpYv8KvngXOz0lSa1HAhwsSTxr2"}]},"maintainers":[{"email":"kgreg80@gmail.com","name":"kgregory"},{"email":"kat@storis.com","name":"kthompson23"},{"email":"mck321@gmail.com","name":"shawnmcknight"}],"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_3.0.0_1595112781780_0.3978103102340189"},"_hasShrinkwrap":false},"3.0.1":{"name":"react-scrollbar-size","version":"3.0.1","description":"React component to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"STORIS"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0"},"dependencies":{},"_id":"react-scrollbar-size@3.0.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-O25fZKd8ExvcKBE/suRBbXLN0XKCJo4nR5ur27HyvaHKVvPUDVOD4jXTrZcNHLp26gwwIFJJgE8l9j6aomnzbg==","shasum":"c3366aaacf0408332e1cbd4f60ade7a13389c4fd","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-3.0.1.tgz","fileCount":12,"unpackedSize":16042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHJRBCRA9TVsSAnZWagAAXpIP/RIFagLHudFb9wTxgtXu\ntQQSWyz8wevV2kC8HqQkvBOeei5EHkgkeWfQXC6MMPKITHK2fSsK2GwLqspC\nVLpVmFsRmu6YrwGFO/owRV0XgfmMsvaLdBrCMd3S82vpYTid38MRLqyjwbyW\nKI8j4Mc+nVxrTBmUtzYOIlgvwpLZ5qcJfX00reOMzlM3XXPh8k6sUQ1pjjQJ\nIP7+08nBQIb32BzsF9DFptBEwBsLfDWJCZKFlM22M8RHhTjm2Fb2PaX/tph6\nIxxIJYWS9qjjp6my6txp5Ui8gCE49hyKfc19ygY9Zm+H98ZvWNHytTPzsCid\neFG09pa2GQ/5DZe6gO11s7vEh6crkKOfOoLawJaWFvwNwsrAnX5qXpCHaWga\npLz1zkoW69trGmapzjwHtks8OZ20PcxbyX3mefn8W4Pd3IgsMwCCNSG0xzu9\nmS4Q6XTnLGuYyHh36+2kP2Vo3vW4uDaP0WKnk/ZbhcwZ+wha2dTcDmm2VJAz\nlekAcR71uzelLRO/zimUIMGKjjkir8t0hCPVihZg9br9V2Iucqe4duKXUQCS\ncaYRo+8KmxXcCVodBE/xIvvDlzNVetfHE5Xk9tJx5qTviM0qOKDIiruPrCrw\npg4KRj+hwHLMKs4YGsmODN0J3wDPHY1l+5S6cUVwATskBxygglz+0Z9F+6oa\nVDHg\r\n=y65f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGTy6KzYyznTcOk1DmqaLhaznUNg242RMpOP5kKCbs5AiBx3k4fV1NA50msFAjnj+WjI1wx9ngSwaWEoTmzV6NtGw=="}]},"maintainers":[{"email":"kgreg80@gmail.com","name":"kgregory"},{"email":"kat@storis.com","name":"kthompson23"},{"email":"mck321@gmail.com","name":"shawnmcknight"}],"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_3.0.1_1595708480768_0.2829380939005799"},"_hasShrinkwrap":false},"3.1.0":{"name":"react-scrollbar-size","version":"3.1.0","description":"React component to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/STORIS/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"STORIS"},"license":"MIT","bugs":{"url":"https://github.com/STORIS/react-scrollbar-size/issues"},"homepage":"https://github.com/STORIS/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.1"},"dependencies":{},"_id":"react-scrollbar-size@3.1.0","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ikhw07lOuMOKRbhPXPnEGj/wJfLtYnHa5wiNWhMf8Bp8vmNGec04Eiu40peOjVJdsFDiaX8jK+A/lXkpzlHpig==","shasum":"6cff1547ea95f62d6c9d5eb18dad59afe4033a9f","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-3.1.0.tgz","fileCount":12,"unpackedSize":16257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpyCoCRA9TVsSAnZWagAAi8YP/03qoBlly8QdX98aikCO\n7bM1htNYf658EFRwDBue2/TQpckY5BWg7IY7JcHQfdvuvsoodAh0aIYSmANE\ne9Z6JMhOLeah4rIUBLvJ5UejtNF4p/uWqKFWrpp3gIf+3FjsJ39fuHvhCmqa\nFkMGkrvZcuNbgVbtW9ZXiBzz3/dyfIwJg76HdFn0zhxXR5rru+imD+XUDIKj\nK/KyV7yLl/o1VtcX+wzeE7O5KKgm9x38Dr2scIkU94X7jpn+pzm405f8PnL6\nmVrtaIZlMTEQ9TxyifgEdzDIbKvBUirtN/N2hLyAEj1+lcwgc+GGyIIj9OBP\nF3JYLOtAlOVqEHoXQAjpVChfqDPm0n2Dlia4U5nO4XcpnAKG1XXvxqwmGUL5\n/CTdZXsibioetmpcSPaGh3CJyKleGqvqWWzeH357Dj8gm+ROhC9hSGu2zVTy\nOhhnU60c9Lr18pcTU2qdxchn8hmQ8hVV+Xb9BX0L0wxbh9IIsEbXTe5BbRKm\nHC+Iu1X0NhjSdUKUnlrC0kaK/t/ZAuUB2mKcMpcf0a7W6r2PkSw3/YGebzKG\n8acWBZAMks9DLDxLuR5e9g8fHJdneJ6LG/GYUMCQ4M5iysvNMOH0OiflPEPC\n/qD3ck4b7gbQ7eDjEG5DGEFFxhZwqmmHyOENyBtLLuobkrwNamjixQ1EsCVg\nU5Kd\r\n=LAzu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9hBbaqXQOAWfeqxLu/i6alV5tf0MqpO7F2rwS58CgWAiAgD/VV7NGJYtqOWS3LboEmU6NhiGgwxSiOUHAJRjx87Q=="}]},"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"maintainers":[{"name":"kthompson23","email":"kat@storis.com"},{"name":"kgregory","email":"kgreg80@gmail.com"},{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_3.1.0_1604788392234_0.05380581630805814"},"_hasShrinkwrap":false},"3.1.1":{"name":"react-scrollbar-size","version":"3.1.1","description":"React component to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/shawnmcknight/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"Shawn McKnight"},"license":"MIT","bugs":{"url":"https://github.com/shawnmcknight/react-scrollbar-size/issues"},"homepage":"https://github.com/shawnmcknight/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.1"},"dependencies":{},"_id":"react-scrollbar-size@3.1.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Eiy+MUWz9CmQsSSMitwVL2niZArWVtobeYsEghaDSEC/JPDpKthZXr476mHsMqsqNmvMmaZ6SkrOAjgZmQ8UaQ==","shasum":"d5008a59cc1dd15663ed3fdba1de7d653abe1e95","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-3.1.1.tgz","fileCount":12,"unpackedSize":16774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQ8OyCRA9TVsSAnZWagAAeAIP/1lUTYF4FlclY+dEUdIx\n8mZecJ9yPrg8sRYtI6QOuLkr8sscEFb9b5sNYB6rZFvZw93PSnWPM1D0cKf4\n1FE0P9AsrUGmO+YtWwPAC7WC4nvJP43tWbRWp6CjeEpKfB2kJ6/X2Uhk7aaz\nWfQFTkP+Bbc5//fyDMo06BVY/ktIZI4pOKXYoVzCrC+4HjvSvxHbtlCzF+XZ\nJArNs8yqLNYYqslq/zajDt/YXQPiLvxTWvj41FoBmiIv+kA6bkJ2jYhPHrE+\nkblyai2UIvS2KVua00qXgRJGcPvsRT9DgiRk7qSvifmn/i4HySTTJWpkaEWH\nVeUxWhrBcgTjnCjl9BjgXIjrgJKD7V7csDbhs0wjXdqE3Qu9g8PbBnswHl8X\nsQaZDL21j1X8FR4MIRziLoF3GupYWtr7VtZ0WQHMSpXEJpIPxLuAeu5aVlnH\ncBJZRlBEdXszHXwe0dOV95clVIBhXdYswQ15KWIyHmq7T+0JvJnl0L+oraI9\n8rpkFrFcV5b+/afyXwRJaT11GhUs931+vGueKoJlRF0bcQqc8gX6vYvrWzB9\nmCx8+Of6VylbZM34UtA8UsyrdJ/qM34dQO7aKrHFnaBe2Q4OFxfMHgLQjuYS\n70/08X10KAlTSaJFbwaZpl4nDnt6/TkGdhqVrFqo+li952sh5Q6B6Z7IihCA\nH1pk\r\n=pktZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6ltawfkFTc1ERwPP5nhaBiq1ZI2GVQrmyXh7YKMS4hgIhAJWjQrdAnGmYl0SW/25C+hPv/tZIXwf/bAlsgE72cDo7"}]},"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"maintainers":[{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_3.1.1_1615053745552_0.5364455755326991"},"_hasShrinkwrap":false},"3.2.0":{"name":"react-scrollbar-size","version":"3.2.0","description":"React component to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/shawnmcknight/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"Shawn McKnight"},"license":"MIT","bugs":{"url":"https://github.com/shawnmcknight/react-scrollbar-size/issues"},"homepage":"https://github.com/shawnmcknight/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.1"},"dependencies":{},"_id":"react-scrollbar-size@3.2.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3CiK6Wf+kkZukwQGoVeYA87QsfNunMADK9wZ388VMzbuN7Y67F9b6b/KNf8lSYDNbqRNHzapDaVbC9AaO1vENw==","shasum":"2ab5c6f574cd0051dfcdbae337a64073a949ad6f","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-3.2.0.tgz","fileCount":14,"unpackedSize":17937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSr85CRA9TVsSAnZWagAAF2wP/09vDEL5xXSiDV0lBCi8\nPlzy6AohKK0HfGaY8QXm1oFIf649bPpIztcc2lucB5ESSDR/zATibex0Mxwz\nAj4w95w7162jDkvk+zOSW2YYKPkPhHE84A6XJLYV3LI4KuYresTwuY8W0MgJ\nhVMl3fwBywpWBj6jvJBhBGRUD+IwhIlvBMfc74H+m+7r44Bwxi11KO+5SEzs\nrez7xwZfXJF3ONhkMZ3oLoEyx0jUJ3T0yU5dP6vxrqGBnittHbbU6Fs8i+f3\n9yxd1QYN08EwAHzJ54876yYC3eD5oUJ861yDgLBxaJKIj/TBp7n+AGtFPufW\nNFW/W5K0eoKuP7aKYzmNg238D9nEKO97DEbZMzEsf5ARreZPha9Y6k1JgBpY\nP48lfdXEFfES0hojtB4c1FZPGtZw5UjBQGRX3iMjZSJi05rKoSvzKJFRflAE\nUMSNMPI2FK/m8VPz/Y4DaTagA9lumJt4T2bz66MhqRO0Rm3kPfMhq6rCQCZi\niMS8lfifziaTfNAXFeKyntKHZP3yUU5Vd6Qv8gq0zVB0BP576ayUzshkF2DQ\nnHmiVkRscKKqzrQisfWutk6c3szXWGjf4TxFi9rMK/Em0nJDOeUlNAGY7L4U\naDb0ujuohPGOO1nGZz5U56hDfJ2wiRtyRy612kwZrMpMsaTR81ECkKTx6emw\nhDYM\r\n=ho5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7IGnUXVEA96xEgUt6xFxwd+SqYq/Xh/Bf858+DkaWMAiBCQ+YwUMDqeAI8fsb8tHLKOdBk4uOfVHuJnmSf0IYahQ=="}]},"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"maintainers":[{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_3.2.0_1615511353189_0.786909749619702"},"_hasShrinkwrap":false},"4.0.0-rc.0":{"name":"react-scrollbar-size","version":"4.0.0-rc.0","description":"React hook to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/shawnmcknight/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"Shawn McKnight"},"license":"MIT","bugs":{"url":"https://github.com/shawnmcknight/react-scrollbar-size/issues"},"homepage":"https://github.com/shawnmcknight/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.1"},"dependencies":{},"readme":"# React-Scrollbar-Size\n
\n\nReact-Scrollbar-Size is a [React](https://reactjs.org/) hook designed to calculate the size of the user agent's horizontal and vertical scrollbars.\nIt will also detect when the size of the scrollbars change, such as when the user agent's zoom factor changes.\n\n[![npm package](https://img.shields.io/npm/v/react-scrollbar-size/latest.svg)](https://www.npmjs.com/package/react-scrollbar-size)\n[![npm downloads](https://img.shields.io/npm/dm/react-scrollbar-size)](https://www.npmjs.com/package/react-scrollbar-size)\n[![CircleCI](https://circleci.com/gh/shawnmcknight/react-scrollbar-size.svg?style=shield)](https://circleci.com/gh/shawnmcknight/react-scrollbar-size/tree/main)\n[![Code Climate](https://img.shields.io/codeclimate/maintainability/shawnmcknight/react-scrollbar-size)](https://codeclimate.com/github/shawnmcknight/react-scrollbar-size)\n[![Code Style](https://badgen.net/badge/eslint/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)\n[![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)\n[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=shawnmcknight/react-scrollbar-size)](https://dependabot.com)\n[![Dependencies](https://david-dm.org/shawnmcknight/react-scrollbar-size/main/status.svg)](https://david-dm.org/shawnmcknight/react-scrollbar-size/main)\n[![PeerDependencies](https://david-dm.org/shawnmcknight/react-scrollbar-size/main/peer-status.svg)](https://david-dm.org/shawnmcknight/react-scrollbar-size/main?type=peer)\n[![DevDependencies](https://david-dm.org/shawnmcknight/react-scrollbar-size/dev-status.svg)](https://david-dm.org/shawnmcknight/react-scrollbar-size/main?type=dev)\n[![Percentage of issues still open](https://isitmaintained.com/badge/open/shawnmcknight/react-scrollbar-size.svg)](https://isitmaintained.com/project/shawnmcknight/react-scrollbar-size)\n![License](https://img.shields.io/npm/l/react-scrollbar-size)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](code_of_conduct.md)\n[![Star on Github](https://img.shields.io/github/stars/shawnmcknight/react-scrollbar-size?style=social)](https://github.com/shawnmcknight/react-scrollbar-size)\n\n
\n\n## Installation\nReact-Scrollbar-Size is available as an [npm package](https://www.npmjs.com/package/react-scrollbar-size):\n\n:information_source: The examples referenced here relate to the 4.0.0 release candidate, which can be installed using the `next` tag. Earlier versions of the custom hook syntax can be viewed [here](https://github.com/shawnmcknight/react-scrollbar-size/blob/3.2.0/README.md). Earlier versions of the legacy component syntax can be viewed [here](https://github.com/shawnmcknight/react-scrollbar-size/blob/3.1.1/README.md).\n\n```sh\n$ npm install react-scrollbar-size@next\n```\n\n## Usage\nThe `useScrollbarSize` custom hook returns an object with two properties:\n\n| Name | Description |\n| -------- | ---------------------------------------------- |\n| `width` | The current width of the vertical scrollbar |\n| `height` | The current height of the horizontal scrollbar |\n\n## Examples\nTo see a live example, follow these [instructions](/example/README.md).\n\n### TypeScript\n```tsx\nimport React, { CSSProperties, FunctionComponent } from 'react';\nimport useScrollbarSize from 'react-scrollbar-size';\n\nconst styles: CSSProperties = {\n margin: '1rem',\n textAlign: 'center',\n};\n\nconst ScrollbarSizeDemo: FunctionComponent = () => {\n const { height, width } = useScrollbarSize();\n\n return (\n
\n

React Scrollbar Size Demo

\n

Tip: Change browser zoom level to see scrollbar sizes change.

\n

\n The current height of the scrollbar is {height}px.\n
\n The current width of the scrollbar is {width}px.\n

\n
\n );\n};\n```\n\n### JavaScript\n```jsx\nimport React from 'react';\nimport useScrollbarSize from 'react-scrollbar-size';\n\nconst styles = {\n margin: '1rem',\n textAlign: 'center',\n};\n\nconst ScrollbarSizeDemo = () => {\n const { height, width } = useScrollbarSize();\n\n return (\n
\n

React Scrollbar Size Demo

\n

Tip: Change browser zoom level to see scrollbar sizes change.

\n

\n The current height of the scrollbar is {height}px.\n
\n The current width of the scrollbar is {width}px.\n

\n
\n );\n};\n```\n\n## License\nThis project is licensed under the terms of the\n[MIT license](/LICENSE).\n","readmeFilename":"README.md","_id":"react-scrollbar-size@4.0.0-rc.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zf73c2DRmWSKh0z/hACKxdjvac1lZX6UmewnGiiZt8Taflg0dOrbBvpb60TA6ZKPvXBoaZke+8NIiLyQ3/5Ncg==","shasum":"f1c47cbeacda60b014f87d18725cd5bb613c2202","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-4.0.0-rc.0.tgz","fileCount":12,"unpackedSize":16914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgadw5CRA9TVsSAnZWagAAULAP/2MxoMmeTT9pYh6ft2ZS\n47rS+r8hv2Ay5kzW5TzFuvzSzsWnV0Qb2nk/0pX1jv11r0vLHDmPdYBWbzET\nAu+p2zGeecdxuLtCRKZAmJbzwbC1lNPXa2cYqtdIfT5bh9KDxyLvT74bbxjT\nJR/QyAOYZZKtZP07r3z0tLvMbHWVJ35+OKzivKTkgRXp1YKZRcZUnIvFosBo\n/6iprNM+mksKow+xOqkq5GpgFD/N9eq503hT6hnIHZO/MMwT79SZOclLOP2N\n/uJysrGUGmQ4vhC+iuy8kAEvBAibcW1aXn8rQaNzUWFb8VouES1j3oIOLWlq\nm4iT63m3pO5dP7uoekLhI/r2tVqShH3SDxSzD97sAmyze16uhOGpwTAbJC7q\nf82wgilWCGiz7GHNwpi7VTLOIr8p4E5E7Vts4sa8dTmH0HcFFoAhq3llo0J/\n4fntfrzgLsr/EIF6FED6aqbN693xdfa0mRBKtjfv3Z3sD+aeDwu9/n51dRSB\nPymqxRGxqRrj1V831oBj2/VaV25uGWGhXUfbNa8om2j+Qj466idr2s0k5WR/\nYPIpeBHNnrS+BeMJXv9YeK8HDoyd2BQbqEfc9akRnED+heDwftnVrtkK1mDH\nrGcmyLQieMGGjKZpta31BG1C+Bq1/3dGqoZtS0gV2ohVU05VU+hZo0pFuG1d\nhuKe\r\n=hTMk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdXjB3CYVukHCMOk/2+YFcOTRcNpn43u0f95/WlTcbUwIgWOzCtXfIQvBNLuF9L15c3wYyPSSufJIHWNNfhU4U0II="}]},"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"maintainers":[{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_4.0.0-rc.0_1617550393520_0.792693734817195"},"_hasShrinkwrap":false},"4.0.0":{"name":"react-scrollbar-size","version":"4.0.0","description":"React hook to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/shawnmcknight/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"Shawn McKnight"},"license":"MIT","bugs":{"url":"https://github.com/shawnmcknight/react-scrollbar-size/issues"},"homepage":"https://github.com/shawnmcknight/react-scrollbar-size#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.1"},"dependencies":{},"_id":"react-scrollbar-size@4.0.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6ocQusPakZGPQQc5mxMRd9Cqy1ALKHyR6eGFbNWM94NPRBnhqAo0DSWXBodhgm9vg8y21o3ZudYJD8gyoW/NRw==","shasum":"47c130b9c46331c1bdade030b890d80388da9c6b","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-4.0.0.tgz","fileCount":12,"unpackedSize":17037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgn9+YCRA9TVsSAnZWagAAvYEP/AxOefRNV5m6oRyHf3YS\nu76sdVtShGfuNjbmnfNvJNkozpAHPczJcvQ0Bz42IXESoNLUBri8WfxHt6eo\nYXwezwpcYGEuccIzVKktKyv1Ys0gIKvQzOpyAyyxPOeJxSrHmHTV81YmIWHl\nLxBu0B2Ta9cKbOGU5UgFrAs2FA6uvIOkG7IAC4VTNre0vT/QSXtSiber99Bb\nSmGkERllyo17E22SHbirqmXU1CDu1plhF0EF+JLtrhnhtLqBUCgKyB3/kg6q\nJt6NUJj2Yc0xxJQofg5oCumdBBy/b+2L7+dod52E+OR8JOUAQDNpqtMGdp2/\n41vn+MKc7btTdEU9LMqenUASim2aFMcjtcKRzacPIDDypK3BiKKuKsiLjSfe\n2jLNL3wdbJ+Gbw8MGz9B7BGnZe+BjNlwSZTisaZZLyTq8dUTVf87NTSu5IVb\nU/0TOqxOBLbg4Snz+xQgTZIjYhZ0TVXrHtYtliMD3oGLy37x8ZVC4lf9jj86\n7LOCmloPpx2O4jU0q94jahTmElYY6ektH40NacMM+A0s1MncAgaUudVXxQvT\na8F7RIDTTificxYWKO8jDUmhZGfVYRH2Phc91jTpWexjNSUciUL9ysIl0ALh\nRKC1+MuMNKme6H13YRdyuNS229/N3fk46SE8Y1PKAvhtQOjYkjf1DzCHeNTm\nz70y\r\n=RurW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiCF9OqUP2f5kc1IeW3WvbXv7ayxf5D+SbiYN6xBdOYAiEAtJpTqB5W+TwviBkF9zKnTOtQZJLpFVzatvAxxvG2rzo="}]},"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"maintainers":[{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_4.0.0_1621090199581_0.9337136689057042"},"_hasShrinkwrap":false},"5.0.0":{"name":"react-scrollbar-size","private":false,"version":"5.0.0","description":"React hook to calculate the size of browser scrollbars","main":"index.js","repository":{"type":"git","url":"git+https://github.com/shawnmcknight/react-scrollbar-size.git"},"keywords":["react","scrollbar"],"author":{"name":"Shawn McKnight"},"license":"MIT","bugs":{"url":"https://github.com/shawnmcknight/react-scrollbar-size/issues"},"homepage":"https://github.com/shawnmcknight/react-scrollbar-size#readme","engines":{"node":">=14.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.1 || ^18.0.0"},"types":"./index.d.ts","gitHead":"3a4155fb0ba7ad431b32d8feef82d92ac2ec8fc4","_id":"react-scrollbar-size@5.0.0","_nodeVersion":"16.13.1","_npmVersion":"8.8.0","dist":{"integrity":"sha512-Ly3OuRMz4yDFViTh+ANH6TrG8EqrgjC1uxxm2a/95+2Ijy3XT+bWtzm4QmgZUcUVg+8BCKzmPMM7z39ZtucDIQ==","shasum":"29892779dfcb9077ce18e2483d1dba6400c58fb0","tarball":"https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-5.0.0.tgz","fileCount":12,"unpackedSize":16936,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAJzvE1VSK9/t9k8aOA7QWtbqVnayBNFi+HvL4K6uxGAiEAoLG4t9lNdRbgGaJYvIgnY+0qWmQIHQqDo19GDtUfn74="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidqUKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3mw/6A5dB8kvgrHbMWuuhqtLdLb3trXM45knEksdSBy5btopXwvsG\r\nfS8d7T+SpkZFIY/4CyOHx6Y3FADWVzF1DIsOZF6ham186Fi+YBYjfozASSAR\r\nhJctspt2Pfp/iJc2mGKObMDIMki0aNm/5LgqG1JxEg36TvNskrIL/bwWSgVO\r\n7lGJq/TL6dcL/+UVZVDYmGSOtS1i1BlFwTYapK7UgYPasqb+KkWFNUO9XEsE\r\nxajBxjCYpjB/cl+H7c+7lv2L/gvhfXmoUp4GcgKVfchcOtNnWJySF6ZZua6p\r\nbbawknlkrYcB2xClBbARXp5Pkslkd4i6YNWNLuRV0G/liOgv7gHHVy/8zw8q\r\npgUv8YiraJWUJ8UzQBKeAzsiRzw97naHq6FcOknK6ZjxeDlqhSSxx/DVQunC\r\nL7OmWXX/H3/kKS+YLSkpLlxJQqvgfg6FlrA07IFVjyQwhk5GGEqOp9VBys08\r\ne+JKihmpMeaaoe6kjFv/Rho5b9y2sVJhIQpyUAFVGkDFnzJZCOkGrdu4Z6+0\r\nf3eitgYSPUgKA3VkOurLFp1R/h7fP3Crft6zrQmrlUt349tokqFNjajsgIl5\r\n7GDRiwx41i4wjxZZD/O6NWGQW+fRXfqz9O3x/dVN5EnopOoFNjLm1Ll3IuUR\r\nt7zaLyuh3/oXJFQVih7AE0eW4+1VHj1AzZU=\r\n=pmU+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"shawnmcknight","email":"mck321@gmail.com"},"directories":{},"maintainers":[{"name":"shawnmcknight","email":"mck321@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scrollbar-size_5.0.0_1651942666578_0.5273978276019469"},"_hasShrinkwrap":false}},"readme":"# React-Scrollbar-Size\n\n
\n\nReact-Scrollbar-Size is a [React](https://reactjs.org/) hook designed to calculate the size of the user agent's horizontal and vertical scrollbars.\nIt will also detect when the size of the scrollbars change, such as when the user agent's zoom factor changes.\n\n[![npm package](https://img.shields.io/npm/v/react-scrollbar-size/latest.svg)](https://www.npmjs.com/package/react-scrollbar-size)\n[![npm downloads](https://img.shields.io/npm/dm/react-scrollbar-size)](https://www.npmjs.com/package/react-scrollbar-size)\n[![CircleCI](https://circleci.com/gh/shawnmcknight/react-scrollbar-size.svg?style=shield)](https://circleci.com/gh/shawnmcknight/react-scrollbar-size/tree/main)\n[![Code Climate](https://img.shields.io/codeclimate/maintainability/shawnmcknight/react-scrollbar-size)](https://codeclimate.com/github/shawnmcknight/react-scrollbar-size)\n[![Code Style](https://badgen.net/badge/eslint/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)\n[![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)\n[![Dependencies](https://img.shields.io/librariesio/release/npm/react-scrollbar-size)](https://libraries.io/npm/react-scrollbar-size)\n[![Percentage of issues still open](https://isitmaintained.com/badge/open/shawnmcknight/react-scrollbar-size.svg)](https://isitmaintained.com/project/shawnmcknight/react-scrollbar-size)\n![License](https://img.shields.io/npm/l/react-scrollbar-size)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](code_of_conduct.md)\n[![Star on Github](https://img.shields.io/github/stars/shawnmcknight/react-scrollbar-size?style=social)](https://github.com/shawnmcknight/react-scrollbar-size)\n\n
\n\n## Installation\n\nReact-Scrollbar-Size is available as an [npm package](https://www.npmjs.com/package/react-scrollbar-size):\n\n```sh\n$ npm install react-scrollbar-size\n```\n\n## Usage\n\nThe `useScrollbarSize` custom hook returns an object with two properties:\n\n| Name | Description |\n| -------- | ---------------------------------------------- |\n| `width` | The current width of the vertical scrollbar |\n| `height` | The current height of the horizontal scrollbar |\n\n## Examples\n\nTo see a live example, follow these [instructions](/example/README.md).\n\n### TypeScript\n\n```tsx\nimport { CSSProperties, FunctionComponent } from 'react';\nimport useScrollbarSize from 'react-scrollbar-size';\n\nconst styles: CSSProperties = {\n margin: '1rem',\n textAlign: 'center',\n};\n\nconst ScrollbarSizeDemo: FunctionComponent = () => {\n const { height, width } = useScrollbarSize();\n\n return (\n
\n

React Scrollbar Size Demo

\n

Tip: Change browser zoom level to see scrollbar sizes change.

\n

\n The current height of the scrollbar is {height}px.\n
\n The current width of the scrollbar is {width}px.\n

\n
\n );\n};\n```\n\n### JavaScript\n\n```jsx\nimport useScrollbarSize from 'react-scrollbar-size';\n\nconst styles = {\n margin: '1rem',\n textAlign: 'center',\n};\n\nconst ScrollbarSizeDemo = () => {\n const { height, width } = useScrollbarSize();\n\n return (\n
\n

React Scrollbar Size Demo

\n

Tip: Change browser zoom level to see scrollbar sizes change.

\n

\n The current height of the scrollbar is {height}px.\n
\n The current width of the scrollbar is {width}px.\n

\n
\n );\n};\n```\n\n## License\n\nThis project is licensed under the terms of the\n[MIT license](/LICENSE).\n","maintainers":[{"name":"shawnmcknight","email":"mck321@gmail.com"}],"time":{"modified":"2022-06-26T08:07:23.088Z","created":"2017-03-25T19:06:19.368Z","0.1.0":"2017-03-25T19:06:19.368Z","1.0.0":"2017-04-17T20:09:19.047Z","1.0.1":"2017-04-26T22:53:10.767Z","1.0.2":"2017-05-28T14:42:00.416Z","2.0.0":"2017-05-30T15:41:58.497Z","2.0.1":"2017-09-19T22:05:54.272Z","2.0.2":"2017-10-06T02:38:06.147Z","2.1.0":"2018-01-31T20:56:24.302Z","3.0.0-rc.0":"2020-07-18T17:56:53.348Z","3.0.0":"2020-07-18T22:53:01.891Z","3.0.1":"2020-07-25T20:21:20.888Z","3.1.0":"2020-11-07T22:33:12.349Z","3.1.1":"2021-03-06T18:02:25.699Z","3.2.0":"2021-03-12T01:09:13.382Z","4.0.0-rc.0":"2021-04-04T15:33:13.635Z","4.0.0":"2021-05-15T14:49:59.740Z","5.0.0":"2022-05-07T16:57:46.700Z"},"homepage":"https://github.com/shawnmcknight/react-scrollbar-size#readme","keywords":["react","scrollbar"],"repository":{"type":"git","url":"git+https://github.com/shawnmcknight/react-scrollbar-size.git"},"author":{"name":"Shawn McKnight"},"bugs":{"url":"https://github.com/shawnmcknight/react-scrollbar-size/issues"},"license":"MIT","readmeFilename":"README.md","users":{"shawnmcknight":true}}