{"_id":"@charlietango/use-scroll-percentage","_rev":"5-3393c7e2f82fc8df589b46f94d59a9a4","name":"@charlietango/use-scroll-percentage","dist-tags":{"latest":"1.5.1"},"versions":{"1.5.0":{"name":"@charlietango/use-scroll-percentage","description":"Monitor the the amount an element is scrolled inside the viewport","version":"1.5.0","private":false,"sideEffects":false,"main":"lib/useScrollPercentage.cjs.js","module":"lib/useScrollPercentage.esm.js","typings":"lib/useScrollPercentage.d.ts","license":"MIT","keywords":["react","hooks"],"repository":{"type":"git","url":"git+https://github.com/charlie-tango/hooks.git"},"scripts":{"lint":"eslint . --ext js,ts,tsx","prebuild":"rm -rf lib","build":"rollup -c ../../tools/rollup.config.js","postbuild":"tsc --noEmit false","prepublish":"yarn build","pretty":"prettier '**/*.{js,ts,tsx,md,json,yml,html}' --write","test":"jest"},"babel":{"extends":"../../.babelrc"},"jest":{"preset":"../../jest.config.js"},"publishConfig":{"access":"public"},"devDependencies":{"react-intersection-observer":"^8.22.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"gitHead":"f106d070a2a67b4914a047aba46717ab2303ce85","bugs":{"url":"https://github.com/charlie-tango/hooks/issues"},"homepage":"https://github.com/charlie-tango/hooks#readme","_id":"@charlietango/use-scroll-percentage@1.5.0","_nodeVersion":"11.14.0","_npmVersion":"lerna/3.13.4/node@v11.14.0+x64 (darwin)","_npmUser":{"name":"thebuilder","email":"dsc@charlietango.dk"},"dist":{"integrity":"sha512-9bT3cmLDRBvgyjToZMaJmY4TRT/abTqFfLGiZN35QAZ8L+4tSvuIMRkY05dnRhwfKgdtwOK45/nHIV9UBirKuA==","shasum":"4c9defcb2675130bc3ea6fa0f8d4526baf7d95f2","tarball":"https://registry.npmjs.org/@charlietango/use-scroll-percentage/-/use-scroll-percentage-1.5.0.tgz","fileCount":8,"unpackedSize":10327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyCxLCRA9TVsSAnZWagAAefsP/iL26TiGVkBKYcdhHXPs\ny5JQkBx4V03SyzNf68A6Qedv+UyjEaETrsVy8ZPK1oJQ/g4f+3N/ADrL8kiC\n0gLUd6SaZc7O3w5Un1hooXUdwAH7M9X/zsIDW7wftNUIU+T5ivG9wiCAcvXK\niRRZZESyAjmNtOlIWZpW7LSiSdHsdi5aFzLzj7Czv8+K1dTK1f6nIvnwLlz+\nsFdsXmjQUVrd9Z5fneP/m5rk4FFNGAS8ZGf6TQ3dRsd9eXkDba3IIkLjHSn7\n+IGpWEVmgQmKCEBLWVtZmFJlfiPF4i/bQIGJGhG38kLrrUK+sEtm+wbUSBca\nwDl+JKFIcyBFi0LAAa97mrmcgJtyzvHRwY+iAF0KHigQWaNApANXDS2Vz0eg\n6Zd0tC3qL7panqBcXRuy2eCEK+c52jEZJD3PvojRMhVzCz1lyTiFARnBGhxZ\nhiwUNsNULgYlk02lVTpVfGzcRi6VpzIOojwMdtve0zDoFM0pIJWKFjUKtnq4\nas3N1OFyOjZ9/gON07MeQINXCelvv0FlZ4srkctAbSSGpgrc5JIOVyWZEp3A\nxNawdbjoDbJijSYru7OFNJVI5zFSsFl1bfnd7BFCorYTPUI/d3ynlPNKa+Ws\nyRciTxm5osLJjCS7shR7dQcbM3ZEH0WloN08OwTl4723zMCkKbG5mEY7APqx\nFF8v\r\n=ral9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhrt9bXXwlv+E2KLNdc9IoV5DDBdurj17N2BjJxiHoMgIgNQ4aXxvYl6JPqd8gVN4CGw6ymUvLgOZLCMlws7Vcn1Q="}]},"maintainers":[{"name":"ignas","email":"ignas.bagdon@gmail.com"},{"name":"thebuilder","email":"dsc@charlietango.dk"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-scroll-percentage_1.5.0_1556622410888_0.5564406848139583"},"_hasShrinkwrap":false,"deprecated":"No longer maintained, please switch to react-scroll-percentage"},"1.5.1":{"name":"@charlietango/use-scroll-percentage","description":"Monitor the the amount an element is scrolled inside the viewport","version":"1.5.1","private":false,"sideEffects":false,"main":"lib/useScrollPercentage.cjs.js","module":"lib/useScrollPercentage.esm.js","typings":"lib/useScrollPercentage.d.ts","license":"MIT","keywords":["react","hooks"],"repository":{"type":"git","url":"git+https://github.com/charlie-tango/hooks.git"},"scripts":{"lint":"eslint . --ext js,ts,tsx","prebuild":"rm -rf lib","build":"rollup -c ../../tools/rollup.config.js","postbuild":"tsc --noEmit false","prepublish":"yarn build","pretty":"prettier '**/*.{js,ts,tsx,md,json,yml,html}' --write","test":"jest"},"babel":{"extends":"../../.babelrc"},"jest":{"preset":"../../jest.config.js"},"publishConfig":{"access":"public"},"devDependencies":{"react-intersection-observer":"^8.22.6"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"gitHead":"b1328654ee82cb1d24a3e962260f72f354b12bb4","bugs":{"url":"https://github.com/charlie-tango/hooks/issues"},"homepage":"https://github.com/charlie-tango/hooks#readme","_id":"@charlietango/use-scroll-percentage@1.5.1","_nodeVersion":"11.14.0","_npmVersion":"lerna/3.13.4/node@v11.14.0+x64 (darwin)","_npmUser":{"name":"thebuilder","email":"dsc@charlietango.dk"},"dist":{"integrity":"sha512-XiVvX62PGbrjVsgSlAUA2xfJLTOyBOl6HYGHIeNmG2XuQnLgGwRL0fU/g4Ne62PMpNfa877qp5J37ROyn4ffuw==","shasum":"e2a720aaf86c56aeb77403538e855b627ee8a945","tarball":"https://registry.npmjs.org/@charlietango/use-scroll-percentage/-/use-scroll-percentage-1.5.1.tgz","fileCount":8,"unpackedSize":10448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4m6SCRA9TVsSAnZWagAAVi0P/jF/kyjLsWRZVRVDz3lF\ny2AvJ9mPvUSux9fWsT8GaX3VV18VHvJD2xRq5hkl/iwomFbKcp/nsBlUH0OV\n8u1LygkHGqidv9kdrQ70hBItKY3kVHv3C38h8i0d4QEX2tk7Ie0juaUXxgfE\nU9QwkE9pZnG4KQ36gYcEXAfHl5u2l4YNkdEy4LfD0yzFLgc7WaLonHeSirrU\nKre3yxwvuD2JcPirL/2zPVQRU9r4zLSUbxLICc1Hvm0VsKFw+lsy1V/uG1Ox\nRQ2NndIE6TKg9iwMnn0lf9/vN5z0eWykujEnrT5KhZ1CISKwZ+ff+Aoj+wH8\nZqLUefTFpDrtB18C5bYaPXeII1nOfbvIHdVcFvReW7IGWYfjAf8ueoCnL5Ye\nOeY5OO9u5ko3ueE7nRr90NMkOpjLdN7jZGSaC+LrWPMmZc0uKtu0iMOrGska\n3EVIgWWfQCjUH+jsa50CfjsxLEJ7uDII/e5Xh+Rq2rQPKdqMxrjdhyOW3SRw\nOERxSfO9koDgAII1YaQEZErpwqodRWXZe4n1hsq6pQlItUmm8yzmgVYCtHMB\nI1D4sKPsBegxfPVJ5IODmvT8TF76aIDfr7rA+WhCUFZnr1vkq1dvdJ6CVQKr\nd4QoqBVZn9JSsOyigRu+W/Xsg0BTJ0v6RTWARx2/rOMebg8/TD0I96aUuwbK\nOUcU\r\n=VgXH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICW0kzphoMAxtg4HH6JupR6dm0JAr69YvKl8atlzwBD4AiAnRkSVaeplSIpDuJ4Jqf35/m9lJ+6Yjxfp8mOhSOaiig=="}]},"maintainers":[{"name":"ignas","email":"ignas.bagdon@gmail.com"},{"name":"thebuilder","email":"dsc@charlietango.dk"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-scroll-percentage_1.5.1_1558343313813_0.27787336805232"},"_hasShrinkwrap":false,"deprecated":"No longer maintained, please switch to react-scroll-percentage"}},"time":{"created":"2019-04-30T11:06:50.750Z","1.5.0":"2019-04-30T11:06:51.369Z","modified":"2022-04-04T22:32:33.369Z","1.5.1":"2019-05-20T09:08:33.923Z"},"maintainers":[{"email":"frederik+npm@bosch.dev","name":"frederik_bosch"},{"email":"dsc@charlietango.dk","name":"thebuilder"}],"description":"Monitor the the amount an element is scrolled inside the viewport","homepage":"https://github.com/charlie-tango/hooks#readme","keywords":["react","hooks"],"repository":{"type":"git","url":"git+https://github.com/charlie-tango/hooks.git"},"bugs":{"url":"https://github.com/charlie-tango/hooks/issues"},"license":"MIT","readme":"# useScrollPercentage\n\nMonitor the the amount an element is scrolled inside the viewport.\nIt's combined with an IntersectionObserver, so it only updates as long as the element is inside the viewport\n\n> Checkout the [Storybook](https://ct-hooks.netlify.com/?path=/story/usescrollpercentage--readme) demo.\n\n## Installation\n\n```sh\nyarn add @charlietango/use-scroll-percentage\n```\n\n## API\n\n```js\nconst [ref, percentage] = useScrollPercentage(options, horizontal)\n```\n\n### Options\n\nOptions should match the Intersection Observer options.\n\n| Name | Type | Default | Required | Description |\n| -------------- | ------------------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **root** | Element | window | false | The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport (`window`) if not specified or if null. |\n| **rootMargin** | string | '0px' | false | Margin around the root. Can have values similar to the CSS margin property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left). |\n| **threshold** | number \\| number[] | 0 | false | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |\n\n## Example\n\n```js\nimport React from 'react'\nimport useScrollPercentage from '@charlietango/use-scroll-percentage'\n\nconst Component = () => {\n const [ref, percentage] = useScrollPercentage()\n return
Scroll percentage: {percentage}
\n}\n\nexport default Component\n```\n","readmeFilename":"readme.md"}