{"_id":"react-ui-scrollspy","_rev":"11-6ab1f4a7d3f04a420d8b7f1c331eaa75","name":"react-ui-scrollspy","dist-tags":{"latest":"2.3.0","beta":"2.0.1"},"versions":{"1.0.0":{"name":"react-ui-scrollspy","version":"1.0.0","description":"## Comands","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.2","react-dom":"^17.0.2","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.30.0","typescript":"^4.4.4"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"author":{"name":"Hussain Pettiwala"},"license":"MIT","bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","gitHead":"6e338a7fd64bbad5e0a211d7dc9f5e7faf62a5c4","_id":"react-ui-scrollspy@1.0.0","_nodeVersion":"16.2.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-H2RWaCYv7lXS6EBwV4iduLUdLT0VAwfq4jT78GapHrdlhLxUQsY/iGJchnmTHU490POXtj+boQ3kKYnkZoAnYg==","shasum":"46e8117f7f97f06e5b2dde7c0ce8a3a67d3b34ec","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-1.0.0.tgz","fileCount":9,"unpackedSize":12223,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr64j4BzPsYTfMzAWkZV/IWjjG4JrV+twPb7cqMwYjhwIhAPvTJ67fuuhELXGNL7jw6kyLfLrv7+s7TBFQeDC487Wc"}]},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_1.0.0_1635785106093_0.6806851499991999"},"_hasShrinkwrap":false},"1.0.1":{"name":"react-ui-scrollspy","version":"1.0.1","description":"## Comands","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.2","react-dom":"^17.0.2","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.30.0","typescript":"^4.4.4"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"author":{"name":"Hussain Pettiwala"},"license":"MIT","bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","gitHead":"c23cbc23c2d0f041d1bdb1cbc2c24e9c87967195","_id":"react-ui-scrollspy@1.0.1","_nodeVersion":"16.2.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-EgOh5mX2M7g1kiEhDhq0y4cKmo6QGZNDcTgg+PAoLlZk/jQ9KWVW/znXeiuqtkZV/O8HKU5H/PU7lQR9aWErjg==","shasum":"ca137322f94254d5975f13116c71807dcc3aa34e","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-1.0.1.tgz","fileCount":9,"unpackedSize":15353,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtul+TKqBH2qGBERUXyj8oI56BNIOyuC33q2tyemup7wIgbPk50Pj6OcYEaXlltmp/6JZZdAGZ+DvsrW/T0m8IPzo="}]},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_1.0.1_1635792334899_0.15785062411211603"},"_hasShrinkwrap":false},"1.0.2":{"name":"react-ui-scrollspy","version":"1.0.2","description":"## Comands","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.2","react-dom":"^17.0.2","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.30.0","typescript":"^4.4.4"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"author":{"name":"Hussain Pettiwala"},"license":"MIT","bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","gitHead":"c23cbc23c2d0f041d1bdb1cbc2c24e9c87967195","_id":"react-ui-scrollspy@1.0.2","_nodeVersion":"16.2.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-SmIjZ09jsjWs89aLXaBlsl3WI06AKAtXw/gdw/spytG6b7TC6kJhIVqSKoY050G3UruURzcg2jrYMVd4Sbzvsw==","shasum":"99b7c658d12fd87471b3119a8c0b91d17060d896","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-1.0.2.tgz","fileCount":9,"unpackedSize":15353,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp5ru36rsbgSJID6Z0dfU1DRs/5Y56kqiCckJFdm7hDAIgVm59ausZf2VAPnFtSv7SWnh4uT17Jk8a7msKgZgz1PI="}]},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_1.0.2_1635792394285_0.11355432900834894"},"_hasShrinkwrap":false},"2.0.0":{"name":"react-ui-scrollspy","version":"2.0.0","description":"Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","author":{"name":"Hussain Pettiwala"},"license":"MIT","keywords":["react","react-component","react-ui","react-ui-scrollspy","ui","typescript","component","onscroll","scroll","spy","performant","scrollspy"],"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.2","react-dom":"^17.0.2","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.30.0","typescript":"^4.4.4"},"gitHead":"bd477979924bc4fe9c47c5e1a3fb68b8f61fc4cb","_id":"react-ui-scrollspy@2.0.0","_nodeVersion":"16.2.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-zBTUDqmy5q92TLZEjjqPy+UY87rZRXnNphUp7mb7bscHqMuM6MSFae9uppmlmhl7yQDknLfUCjarxes+0Nf/7g==","shasum":"0d85657c99bfacc4e3c68bbd7ffffa8395bd2934","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-2.0.0.tgz","fileCount":9,"unpackedSize":24675,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICM3YeDM/6Ms/uCPKEFZWqWy4VWCQ8ys+KWjEUZVCxRyAiBg+otZhrXZIznAym7hL7xfj2URvDr6rGdc8MKvNbOXpQ=="}]},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_2.0.0_1635848240068_0.7915812583109096"},"_hasShrinkwrap":false},"2.0.1":{"name":"react-ui-scrollspy","version":"2.0.1","description":"Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","author":{"name":"Hussain Pettiwala"},"license":"MIT","keywords":["react","react-component","react-ui","react-ui-scrollspy","ui","typescript","component","onscroll","scroll","spy","performant","scrollspy"],"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.2","react-dom":"^17.0.2","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.30.0","typescript":"^4.4.4"},"readme":"<div align=\"center\">\n\n# React UI ScrollSpy\n\n[![npm](https://img.shields.io/npm/v/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy) [![npm](https://img.shields.io/npm/dm/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy)\n[![License MIT](https://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/pettiboy/react-ui-scrollspy/main/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/pettiboy/react-ui-scrollspy/pulls)\n\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)\n![NPM](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)\n\n</div>\n\n## ✨ Installation\n\n```bash\nnpm install --save react-ui-scrollspy\n```\n\nOR\n\n```bash\nyarn add react-ui-scrollspy\n```\n\n## 🎞 Demo\n\n### Try it your self [here](https://pettiboy.github.io/react-ui-scrollspy)!\n\n![ScrollSpy Demo](./demo-app/assets/demo.gif)\n\n## ⚙️ Usage\n\n1. In your navigation component\n\n```tsx\n<div>\n  <p data-to-scrollspy-id=\"first\">Section 1</p>\n  <p data-to-scrollspy-id=\"second\">Section 2</p>\n</div>\n```\n\n2. Wrap the elements you want to spy on in the `<ScrollSpy>` component.\n\n<!-- prettier-ignore -->\n```tsx\nimport ScrollSpy from \"react-ui-scrollspy\";\n\n<ScrollSpy>\n  <div id=\"first\">\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut dolores\n    veritatis doloremque fugit. Soluta aperiam atque inventore deleniti,\n    voluptatibus non fuga eos magni natus vel, rerum excepturi expedita.\n    Tempore, vero!\n  </div>\n  <div id=\"second\">\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut dolores\n    veritatis doloremque fugit. Soluta aperiam atque inventore deleniti,\n    voluptatibus non fuga eos magni natus vel, rerum excepturi expedita.\n    Tempore, vero!\n  </div>\n</ScrollSpy>\n```\n\n3. Write styles for when the navigation element which is active in your `index.css`\n\n```css\n.active-scroll-spy {\n  background-color: yellowgreen;\n  border-radius: 15px;\n}\n```\n\n`NOTE:` See [`demo-app`](./demo-app/src/App.tsx) for example used [here](https://pettiboy.github.io/react-ui-scrollspy).\n\n## 💡 Props\n\n### 🔧 Children\n\n| Attributes | Type        | Description                                        | Default | Required |\n| :--------- | :---------- | :------------------------------------------------- | :------ | :------- |\n| `children` | `ReactNode` | Each direct child `Element` should contain an `id` | -       | yes      |\n\n### 🔧 Refs\n\n| Attributes                 | Type                                              | Description                                                                                             | Default | Required |\n| :------------------------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------ | :------ | :------- |\n| `navContainerRef`          | MutableRefObject<br><HTMLDivElement \\| null><br/> | `ref` to your navigation container containing items with `data-to-scrollspy-id` attributes              | -       | no       |\n| `parentScrollContainerRef` | MutableRefObject<br><HTMLDivElement \\| null><br/> | If you want to spy only on a particular scrollable `container (Element)` then pass its ref to this prop | -       | no       |\n\n### 🔧 Throttle\n\n| Attributes       | Type     | Description                                                                                                                 | Default | Required |\n| :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------- | :------ | :------- |\n| `scrollThrottle` | `number` | In `milliseconds` to throttle the `onscroll` event. Lower the number, better the response time, higher the performance cost | `300`   | no       |\n\n### 🔧 Callback\n\n| Attributes         | Type                   | Description                                                                                                                        | Default | Required |\n| :----------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------- | :------ | :------- |\n| `onUpdateCallback` | `(id: string) => void` | Executes this function whenever you scroll to a new ScrollSpy child `Element`, callback returns the `id` of that `Element` as well | -       | no       |\n\n### 🔧 Offsets\n\n| Attributes     | Type     | Description                                                                                                     | Default | Required |\n| :------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | :------ | :------- |\n| `offsetTop`    | `number` | Spy will be fired when it has been scrolled `offsetTop` beyond `50%` to the top of the containing element       | `0`     | no       |\n| `offsetBottom` | `number` | Spy will be fired when it has been scrolled `offsetBottom` beyond `50%` to the bottom of the containing element | `0`     | no       |\n\n### 🔧 Customize Attributes\n\n| Attributes         | Type     | Description                                               | Default               | Required |\n| :----------------- | :------- | :-------------------------------------------------------- | :-------------------- | :------- |\n| `useDataAttribute` | `string` | To customize the string after `data-`                     | `\"to-scrollspy-id\"`   | no       |\n| `activeClass`      | `string` | To customize the `class` added when the `Element` in view | `\"active-scroll-spy\"` | no       |\n\n## 📝 Authors\n\n- Hussain Pettiwala ([@pettiboy](https://github.com/pettiboy))\n","readmeFilename":"README.md","gitHead":"ad142b5582f8f6957512821f03da453ae82823f8","_id":"react-ui-scrollspy@2.0.1","_nodeVersion":"16.2.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-lNadsPE7IbOFoOU6Es/Uwu2B7gvShLW59g5icBkvXMVLM47ltc8nXDlbHuVCud19CwzosfvbFd+K+anBXv+hJg==","shasum":"d5cc6b3459e0abb677e26e319b590348fa576f18","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-2.0.1.tgz","fileCount":9,"unpackedSize":25628,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPH8OjH7rusiGefDWeWipHxaVYFa0WCcCaJE55RKFYjgIhAODPKeNrToVbohFgDiSSJXVEqyWjuGmR81bioaTFMLIV"}]},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_2.0.1_1636473733515_0.782084220259837"},"_hasShrinkwrap":false},"2.1.0":{"name":"react-ui-scrollspy","version":"2.1.0","description":"Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","author":{"name":"Hussain Pettiwala"},"license":"MIT","keywords":["react","react-component","react-ui","react-ui-scrollspy","ui","typescript","component","onscroll","scroll","spy","performant","scrollspy"],"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.2","react-dom":"^17.0.2","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.30.0","typescript":"^4.4.4"},"gitHead":"560a52d8de9f6d5add5d8d15d5fd8755a3122cbc","_id":"react-ui-scrollspy@2.1.0","_nodeVersion":"16.2.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-BO0n5m5geHt3B2eLvmlHxF0oQVubQ9kQVBMIaQGEj9XHBilcGiEDW0K0WUlnk/n579t5oKM0DLLR87AZThkeFw==","shasum":"60ccaddcd5cd458721854f0a49dea6580e01a3f0","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-2.1.0.tgz","fileCount":9,"unpackedSize":26533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh25ReCRA9TVsSAnZWagAAW6gP+QGupjZm29aDrxGByBON\nCxTe5Fdz6s8GCmZqnccaPDzItoYW5EpGRYz71QAyiAcSOj+RemV28oITzYTG\njRtPvEQRjEg8QHD+t+GDGLW7ZHmefJhGX6WZaFsC++HYO6rlvzEv3LE6HIXO\nSqpPEi5UIkHiCEl6R2EL6sYeyc8wCL8K0ByNmfkxSkSLsLwpHPpGSgYGessF\nVwLvOO7hFm3zi9l8UqOrfi+TEUZAU/SQZFSR5cvmQwswdLILXW0Znv6vrOdC\nrZtG/syAjRvjuLWqXd+iFYZxIRP5r++qkJnRjgUOylbWN6jR5TtPuF16klGw\n8ozlt4UI+l3Xv5VB53of0irnWfrPG9QyyvDvLF9UskDddTncRQCZoyxhmvDx\ngMqnBFYzbLOniTNWSe55lK6GA7k+ueb0CPO2UEabVYdahAkvlXxgdXyx9KT1\nbO9cvNxjr8CJOfY0tacpx645Xwr4bdry8EJIP5IJGqJxbHCUOgNI8zJSAJsu\nnMMUq983GOhjQWwxyA6jVpSezH5+Xta5u7Z0WD0T71u/2bKleAj6ihvsuqaf\nluMoTQouYClIlGXgPteehJZdXvv97RDVg7L9JWlJbxGeu+GU6C7/+95bHE1k\nKgZOboae9DDf3flo23B5IM0KpWDQ2TQuWjI0st5CDgIFlpcfZqcixsnkTCNA\nJqAP\r\n=pGa1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFo2YyZ5/xmK7xtVFY49pTBZ1V6mVixEL7va8Jdz0vkVAiEA0+gFPRL2tO7ACvyrUHXoV9eZlji/misD/gS6qV8H+EI="}]},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_2.1.0_1636793514098_0.7807061466033309"},"_hasShrinkwrap":false},"2.2.0":{"name":"react-ui-scrollspy","version":"2.2.0","description":"Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","author":{"name":"Hussain Pettiwala"},"license":"MIT","keywords":["react","react-component","react-ui","react-ui-scrollspy","ui","typescript","component","onscroll","scroll","spy","performant","scrollspy"],"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.2","react-dom":"^17.0.2","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.31.0","tslib":"^2.4.1","typescript":"^4.9.4"},"types":"./dist/index.d.ts","gitHead":"9c8321ebaed0e5e7d80991bcf9205b46b4d11fdd","_id":"react-ui-scrollspy@2.2.0","_nodeVersion":"17.8.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-zbD9AYc+et7LsPCC6d+hwZEsrhkxCQjOPpTwP84prHhdMpcvH/NCaUJC5fLVVUFZ8fu/ufH9xJD2k2Cor3RGnw==","shasum":"7aaf6ae0ebc860b07f0132b270eab0fea768c38a","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-2.2.0.tgz","fileCount":9,"unpackedSize":29377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfxB1QzcuPBaSYn/4v8nYEgwyzTBweKruYMb86CMYswAiBxI1yEXyq6RQfVQHO0e8KNbZn09wjxYfS8wx3oDAp+Bg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrdQtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrShQ//cOzQPGjwf05tb8id2yuvFOCQmUcL8XdPvQp2Jy4O9oEvYs5x\r\nykS3KkQd5MoBjFoybuKzNrnrJ1hVAMLk/YrXjE+bLxefjPYY2NnEOk245PKg\r\nyRoIgFfL60rXiaYtLX4adV97T3p7X9V0Gf32V12BkxuNX7lop0tOJML6nXFb\r\nr0bxvw86aa7pd/ZbWTVwxr+mAFiqhqmKqOjxU+HU3BwgZdhC10f7gbw3Lus4\r\nWZy+vLWjO57XBNkcRYGsHT8p0q0lR/09bp3UYDbyKuvPEYIYtr9YRBJkqS1F\r\n9aJqp9epnzFY0wwf0Gj3yTr43n95PI3wzwaPGEms+oOFd+nTIrOeUDX0RlvO\r\nYhfg8mHO/c3JH8A/7cgqAYHHlz/I1O1F5udejYCelDjMZJMLvMWCTFWINraB\r\nhzHl75WX9G+JuIacvIl5MvXbzfZX8nzSmV/56NnOWnYOHoFZcB74unkTnS/d\r\nmyn782s2xwTg697qG5erHByqO1TuAJEonYlg1PUyt5ZHkcMYk1DDZwEijD97\r\n2SqNaeUmOA96xbXFrrJHlqgerh8UqkczxQW/eWLvMM2OBcVeCXF8h8YSeklq\r\nF76rdoYXDdPL+WI91E88zg/lYz4ntY7oXuS252LJAF+dRUzENX8EmRNQToF7\r\npbJB6uW2IDnP7T6AcaeWNIoGS3afqzPa9tM=\r\n=t9iJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_2.2.0_1672336429363_0.17294069276206425"},"_hasShrinkwrap":false},"2.3.0":{"name":"react-ui-scrollspy","version":"2.3.0","description":"Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","author":{"name":"Hussain Pettiwala"},"license":"MIT","keywords":["react","react-component","react-ui","react-ui-scrollspy","ui","typescript","component","onscroll","scroll","spy","performant","scrollspy"],"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/react":"^17.0.33","@types/react-dom":"^17.0.10","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^2.59.0","rollup-plugin-typescript2":"^0.31.0","tslib":"^2.4.1","typescript":"^4.9.4"},"types":"./dist/index.d.ts","gitHead":"f2021432faad8677abd42a71dd719564126e21e7","_id":"react-ui-scrollspy@2.3.0","_nodeVersion":"17.8.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Z4oEFSdwyHYYWo8deOtKSPvdZXkTUUFSkM/Rnww4jiRlBMyubXf5OBauWC0Y0w/w6VTyMlCuZwRKxrrc5khUFg==","shasum":"02c6d578104e5dd20567ea7c8739bd6a80c64290","tarball":"https://registry.npmjs.org/react-ui-scrollspy/-/react-ui-scrollspy-2.3.0.tgz","fileCount":9,"unpackedSize":29523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPlPY8p3dEp35b0wGSqnyr456odoPQbQl5uMT77VSu3wIhAPi2mc3SBvCNNMA7SlghRTlD8C50Jurhat8Vfd2rcPsR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyPtyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSwxAAjvaE17sPlvSZ/+HErTH+HqUvPo3d4UDEGKAVE0Kgz22ury/h\r\nwUsTaH6pjUViIgvFoOrVBPh3fHd3hKHO3mX6dMvPnZe14QCHJRbUHlMAVee7\r\n1BQWJJvKv6oMb++nsEnPU/j8fN1+DCYo3r5oNsHCOT4FnNDh1k2MVRRpjp0q\r\nRD72kRF5+sc24ghiYl5DTbxaknnH58N5gZuZDEsVtaBpoAJzyqs+fOielLCj\r\nkC+P58drwOCkEF05yuG34m5Vr6+ywyeczZX8QIGqPgZ/GmXORExdtUqBk+zp\r\n8rBp1eZFf113kMzWb0PBNiXBzz1Af51fufEmtoSxqrFJHPcS9lkGEChq5Bxq\r\nFDGz3qBSDX+5d6Bjw4xwclix6wFjqbfA51WfUMwAx0kis0EjkutTk12Njqxc\r\nApIp8kkMJQsFNbODZDrucpPSJ9fYYeWpfgeblVMYRMsEggEyb21wZGUO5xqL\r\nkwlVF7HRaRv50HkTg7fB5UpKUWsMh8V9ykKKoEQZpsTeYWsYNZZRErMvKodG\r\nS845RDVjSzmKdxT+sggWk97cOwkmJBQeFqy33o01FbiKkH2buAkJg1wetoMX\r\nGHetgJou5hhAf1AwN1aSlsFYD+v6z9w9yhjTOBj82KHaksU9CkBwVWYJybmI\r\n2j+Qp0qTJKENv/10k7zAPir2+Bh2OaYaBzU=\r\n=290R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"pettiboy","email":"pettiwalahussain@gmail.com"},"directories":{},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ui-scrollspy_2.3.0_1674115953855_0.8034658431411865"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-01T16:45:06.092Z","1.0.0":"2021-11-01T16:45:06.236Z","modified":"2023-01-19T08:12:34.097Z","1.0.1":"2021-11-01T18:45:35.040Z","1.0.2":"2021-11-01T18:46:34.431Z","2.0.0":"2021-11-02T10:17:20.246Z","2.0.2":"2021-11-09T15:55:54.457Z","2.0.1":"2021-11-09T16:02:13.660Z","2.1.0":"2021-11-13T08:51:54.273Z","2.2.0":"2022-12-29T17:53:49.522Z","2.3.0":"2023-01-19T08:12:34.000Z"},"maintainers":[{"name":"pettiboy","email":"pettiwalahussain@gmail.com"}],"description":"Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript and throttle support among others","homepage":"https://github.com/pettiboy/react-ui-scrollspy#readme","repository":{"type":"git","url":"git+https://github.com/pettiboy/react-ui-scrollspy.git"},"author":{"name":"Hussain Pettiwala"},"bugs":{"url":"https://github.com/pettiboy/react-ui-scrollspy/issues"},"license":"MIT","readme":"<div align=\"center\">\n\n![ScrollSpy Demo](./demo-app/assets/banner.png)\n\n# React UI ScrollSpy\n\n[![npm](https://img.shields.io/npm/v/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy)\n[![npm](https://img.shields.io/npm/dy/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy)\n[![License MIT](https://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/pettiboy/react-ui-scrollspy/main/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/pettiboy/react-ui-scrollspy/pulls)\n\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)\n![NPM](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)\n\nMake sure you ⭐️ this [`repository`](https://github.com/pettiboy/react-ui-scrollspy) if you find it helpful or interesting :)\n\n</div>\n\n## ✨ Installation\n\n### React 18\n\n```bash\nnpm install --save react-ui-scrollspy\n```\n\nOR\n\n```bash\nyarn add react-ui-scrollspy\n```\n\n### React 17 and below\n\n```bash\nnpm install --save react-ui-scrollspy@2.2.0\n```\n\nOR\n\n```bash\nyarn add react-ui-scrollspy@2.2.0\n```\n\n## 🎞 Demo\n\n### Try it your self [here](https://pettiboy.github.io/react-ui-scrollspy)!\n\n| [Demo 1](./demo-app/src/pages/Demo1.tsx)      | [Demo 2](./demo-app/src/pages/Demo2.tsx)       |\n| :-------------------------------------------- | :--------------------------------------------- |\n| ![ScrollSpy Demo](./demo-app/assets/demo.gif) | ![ScrollSpy Demo](./demo-app/assets/demo2.gif) |\n\n## ⚙️ Usage\n\n1. In your navigation component\n\n```tsx\n<div>\n  <p data-to-scrollspy-id=\"first\">Section 1</p>\n  <p data-to-scrollspy-id=\"second\">Section 2</p>\n</div>\n```\n\n2. Wrap the elements you want to spy on in the `<ScrollSpy>` component.\n\n<!-- prettier-ignore -->\n```tsx\nimport ScrollSpy from \"react-ui-scrollspy\";\n\n<ScrollSpy>\n  <div id=\"first\">\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut dolores\n    veritatis doloremque fugit. Soluta aperiam atque inventore deleniti,\n    voluptatibus non fuga eos magni natus vel, rerum excepturi expedita.\n    Tempore, vero!\n  </div>\n  <div id=\"second\">\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut dolores\n    veritatis doloremque fugit. Soluta aperiam atque inventore deleniti,\n    voluptatibus non fuga eos magni natus vel, rerum excepturi expedita.\n    Tempore, vero!\n  </div>\n</ScrollSpy>\n```\n\n3. Write styles for when the navigation element which is active in your `index.css`\n\n```css\n.active-scroll-spy {\n  background-color: yellowgreen;\n  border-radius: 15px;\n}\n```\n\n## 📝 Notes\n\nIncase the ScrollSpy is not working the way you expected, you can try the following:\n\n- Reduce the value of [`scrollThrottle`](#-throttle).\n\n- If your page contains a `navbar` a `header` consider adding the following `CSS`\n\n```css\nhtml {\n  scroll-padding-top: 120px; /* height of your navbar */\n}\n```\n\n- Try using [`offsets`](#-offsets).\n\n- Go through the [`Props`](#-props).\n\n- See [`demo-app`](./demo-app/src/App.tsx) for example used [here](https://pettiboy.github.io/react-ui-scrollspy).\n\n## 💡 Props\n\n### 🔧 Children\n\n| Attributes | Type        | Description                                        | Default | Required |\n| :--------- | :---------- | :------------------------------------------------- | :------ | :------- |\n| `children` | `ReactNode` | Each direct child `Element` should contain an `id` | -       | yes      |\n\n### 🔧 Refs\n\n| Attributes                 | Type                                              | Description                                                                                             | Default | Required |\n| :------------------------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------ | :------ | :------- |\n| `navContainerRef`          | MutableRefObject<br><HTMLDivElement \\| null><br/> | `ref` to your navigation container containing items with `data-to-scrollspy-id` attributes              | -       | no       |\n| `parentScrollContainerRef` | MutableRefObject<br><HTMLDivElement \\| null><br/> | If you want to spy only on a particular scrollable `container (Element)` then pass its ref to this prop | -       | no       |\n\n### 🔧 Throttle\n\n| Attributes       | Type     | Description                                                                                                                 | Default | Required |\n| :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------- | :------ | :------- |\n| `scrollThrottle` | `number` | In `milliseconds` to throttle the `onscroll` event. Lower the number, better the response time, higher the performance cost | `300`   | no       |\n\n### 🔧 Callback\n\n| Attributes         | Type                   | Description                                                                                                                        | Default | Required |\n| :----------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------- | :------ | :------- |\n| `onUpdateCallback` | `(id: string) => void` | Executes this function whenever you scroll to a new ScrollSpy child `Element`, callback returns the `id` of that `Element` as well | -       | no       |\n\n### 🔧 Offsets\n\n| Attributes     | Type     | Description                                                                                                     | Default | Required |\n| :------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | :------ | :------- |\n| `offsetTop`    | `number` | Spy will be fired when it has been scrolled `offsetTop` beyond `50%` to the top of the containing element       | `0`     | no       |\n| `offsetBottom` | `number` | Spy will be fired when it has been scrolled `offsetBottom` beyond `50%` to the bottom of the containing element | `0`     | no       |\n\n### 🔧 Customize Attributes\n\n| Attributes         | Type      | Description                                                                                               | Default               | Required |\n| :----------------- | :-------- | :-------------------------------------------------------------------------------------------------------- | :-------------------- | :------- |\n| `useDataAttribute` | `string`  | To customize the string after `data-`                                                                     | `\"to-scrollspy-id\"`   | no       |\n| `activeClass`      | `string`  | To customize the `class` added when the `Element` in view                                                 | `\"active-scroll-spy\"` | no       |\n| `useBoxMethod`     | `boolean` | Set to `false` if you want your spy to be active only if more than `50%` of that `div` is in the viewport | `true`                | no       |\n| `updateHistoryStack` | `boolean` | Set to `false` to disable the URL getting automatically updated when scrolling                          | `true`                | no\n\n##\n\n## 📝 Authors\n\n- Hussain Pettiwala ([@pettiboy](https://github.com/pettiboy))\n","readmeFilename":"README.md","keywords":["react","react-component","react-ui","react-ui-scrollspy","ui","typescript","component","onscroll","scroll","spy","performant","scrollspy"]}