{"_id":"@ahnandev/bidirectional-infinite-scroll","_rev":"4-f8bca5a98deb54ab372d0a1623021b14","name":"@ahnandev/bidirectional-infinite-scroll","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@ahnandev/bidirectional-infinite-scroll","version":"0.1.0","keywords":["infinite-scroll","bidirectional","scrollIntoView","virtual-scroll","intersection-observer"],"license":"MIT","_id":"@ahnandev/bidirectional-infinite-scroll@0.1.0","maintainers":[{"name":"ahnandev","email":"lsy0044@gmail.com"}],"homepage":"https://github.com/ahnandev/bidirectional-infinite-scroll#readme","bugs":{"url":"https://github.com/ahnandev/bidirectional-infinite-scroll/issues"},"dist":{"shasum":"d5cf0f42698bde5ca71db3b4b413bc1166de1cf3","tarball":"https://registry.npmjs.org/@ahnandev/bidirectional-infinite-scroll/-/bidirectional-infinite-scroll-0.1.0.tgz","fileCount":16,"integrity":"sha512-KVYVL//QcFTabJzBX8PGWINbWChx4nVgS9blJ/aDW6Dc0n9a+zNGmwiLDWSJWNsJA5pWHwGwB0WngImgZZpcKw==","signatures":[{"sig":"MEUCIQCtIS7MZfdaitzy5JkyBa7Bf+1a+UjblVQs/GgcYs7Z5wIgH/OIuj/WJr264iOfP+NXtmxP8FgIHl0eHTPkJDXpaQU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":68550},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"fe64cf58aea3504cf8c3fe3c683d299658fc55d2","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","demo:react":"node ./scripts/run-demo-react-version.mjs","test:watch":"vitest","prepublishOnly":"npm run build","test:react-matrix":"node ./scripts/verify-react-matrix.mjs","demo:prepare-react":"node ./scripts/prepare-demo-react-version.mjs","test:react-matrix:demo":"node ./scripts/verify-react-matrix.mjs --demo-build"},"_npmUser":{"name":"ahnandev","email":"lsy0044@gmail.com"},"repository":{"url":"git+https://github.com/ahnandev/bidirectional-infinite-scroll.git","type":"git"},"_npmVersion":"10.9.2","description":"Lightweight bidirectional infinite scroll using scrollIntoView","directories":{},"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","vitest":"^4.1.2","happy-dom":"^20.8.9","react-dom":"^19.2.4","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.2.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/bidirectional-infinite-scroll_0.1.0_1775662530192_0.3367213025518665","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@ahnandev/bidirectional-infinite-scroll","version":"0.1.1","keywords":["infinite-scroll","bidirectional","scrollIntoView","virtual-scroll","intersection-observer"],"license":"MIT","_id":"@ahnandev/bidirectional-infinite-scroll@0.1.1","maintainers":[{"name":"ahnandev","email":"lsy0044@gmail.com"}],"homepage":"https://github.com/ahnandev/bidirectional-infinite-scroll#readme","bugs":{"url":"https://github.com/ahnandev/bidirectional-infinite-scroll/issues"},"dist":{"shasum":"97f87b9c1da83fa262d4e51775a58b38620afd6b","tarball":"https://registry.npmjs.org/@ahnandev/bidirectional-infinite-scroll/-/bidirectional-infinite-scroll-0.1.1.tgz","fileCount":16,"integrity":"sha512-OtFkhLfIuPpVqk3nagFkXwfFEQvytWNEsAh72qQMpgNladJ1Ni36QSLq4D7HTfA6rN0fFvrIaBxkaGB/lAK4eA==","signatures":[{"sig":"MEQCIAsuIVGknBSEcM7iYiP4jfoYQ8mWqLIsy947L37YduQVAiBCxlUy2jIFaKVJ1undTJ14ABvwzeb5rnGyQ/tFzWb3VA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75406},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"2ccc7ff215bcb9d4e2a45a4fcc4f707fe3e60673","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","demo:react":"node ./scripts/run-demo-react-version.mjs","test:watch":"vitest","prepublishOnly":"npm run build","test:react-matrix":"node ./scripts/verify-react-matrix.mjs","demo:prepare-react":"node ./scripts/prepare-demo-react-version.mjs","test:react-matrix:demo":"node ./scripts/verify-react-matrix.mjs --demo-build"},"_npmUser":{"name":"ahnandev","email":"lsy0044@gmail.com"},"repository":{"url":"git+https://github.com/ahnandev/bidirectional-infinite-scroll.git","type":"git"},"_npmVersion":"10.9.2","description":"Lightweight bidirectional infinite scroll using scrollIntoView","directories":{},"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","vitest":"^4.1.2","happy-dom":"^20.8.9","react-dom":"^19.2.4","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.2.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/bidirectional-infinite-scroll_0.1.1_1775669422901_0.2789769561117983","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@ahnandev/bidirectional-infinite-scroll","version":"0.1.2","keywords":["infinite-scroll","bidirectional","scrollIntoView","virtual-scroll","intersection-observer"],"license":"MIT","_id":"@ahnandev/bidirectional-infinite-scroll@0.1.2","maintainers":[{"name":"ahnandev","email":"lsy0044@gmail.com"}],"homepage":"https://github.com/ahnandev/bidirectional-infinite-scroll#readme","bugs":{"url":"https://github.com/ahnandev/bidirectional-infinite-scroll/issues"},"dist":{"shasum":"c3c321954d77c03b5f2040d7be39fe619c4d656b","tarball":"https://registry.npmjs.org/@ahnandev/bidirectional-infinite-scroll/-/bidirectional-infinite-scroll-0.1.2.tgz","fileCount":16,"integrity":"sha512-+GBGRamO9JjRTwjtWtfmwpWsuGxOTigDo44j0kPKYB1AptVzAuKpBfk56Vl/CExBPKhmLeNVUJg2eShgYkiCdg==","signatures":[{"sig":"MEQCIEYuFVD+UjCyFxHJakhyhALAxRLHua2BmGNmlLSpHwmkAiAT/jQ8edIw/H/CbXCM46gf4dw3xMW+WhXYD4zMa8cixA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75514},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"c42b69e036b813809d6df5e50e6f65fa5fa28b6b","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","demo:react":"node ./scripts/run-demo-react-version.mjs","test:watch":"vitest","prepublishOnly":"npm run build","test:react-matrix":"node ./scripts/verify-react-matrix.mjs","demo:prepare-react":"node ./scripts/prepare-demo-react-version.mjs","test:react-matrix:demo":"node ./scripts/verify-react-matrix.mjs --demo-build"},"_npmUser":{"name":"ahnandev","email":"lsy0044@gmail.com"},"repository":{"url":"git+https://github.com/ahnandev/bidirectional-infinite-scroll.git","type":"git"},"_npmVersion":"10.9.2","description":"Lightweight bidirectional infinite scroll using scrollIntoView","directories":{},"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","vitest":"^4.1.2","happy-dom":"^20.8.9","react-dom":"^19.2.4","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.2.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/bidirectional-infinite-scroll_0.1.2_1775669778322_0.20620474103423803","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@ahnandev/bidirectional-infinite-scroll","version":"0.1.3","description":"Lightweight bidirectional infinite scroll using scrollIntoView","repository":{"type":"git","url":"git+https://github.com/ahnandev/bidirectional-infinite-scroll.git"},"homepage":"https://github.com/ahnandev/bidirectional-infinite-scroll#readme","bugs":{"url":"https://github.com/ahnandev/bidirectional-infinite-scroll/issues"},"type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest run","test:watch":"vitest","test:react-matrix":"node ./scripts/verify-react-matrix.mjs","test:react-matrix:demo":"node ./scripts/verify-react-matrix.mjs --demo-build","demo:prepare-react":"node ./scripts/prepare-demo-react-version.mjs","demo:react":"node ./scripts/run-demo-react-version.mjs","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"keywords":["infinite-scroll","bidirectional","scrollIntoView","virtual-scroll","intersection-observer"],"license":"MIT","peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@types/react":"^19.0.0","@types/react-dom":"^19.2.3","happy-dom":"^20.8.9","react":"^19.0.0","react-dom":"^19.2.4","tsup":"^8.0.0","typescript":"^5.5.0","vitest":"^4.1.2"},"_id":"@ahnandev/bidirectional-infinite-scroll@0.1.3","gitHead":"db380380027178c87dde4f26c063e97db8fc9b5c","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-CTFp/FevOWh3lUOIVJRmaBc6IDeayfMatsP/eAB9I/wB6BK9A3BbZPeODcGnKrA/G7t6atTZnPhtrz7qHjveww==","shasum":"162333edbc9aa4012e1e1d3d777979a936ff3d1a","tarball":"https://registry.npmjs.org/@ahnandev/bidirectional-infinite-scroll/-/bidirectional-infinite-scroll-0.1.3.tgz","fileCount":16,"unpackedSize":74802,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQClW9vla7OVK/I4vbaWtGuYNSjOF1r7BgxuDo1wQFs3pgIgauU7ClKMuhpM/8VMrmGRthuWCe6It92awGi/qxD+dl0="}]},"_npmUser":{"name":"ahnandev","email":"lsy0044@gmail.com"},"directories":{},"maintainers":[{"name":"ahnandev","email":"lsy0044@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bidirectional-infinite-scroll_0.1.3_1777051247626_0.0755887719113486"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-08T15:35:30.102Z","modified":"2026-04-24T17:20:47.895Z","0.1.0":"2026-04-08T15:35:30.354Z","0.1.1":"2026-04-08T17:30:23.055Z","0.1.2":"2026-04-08T17:36:18.498Z","0.1.3":"2026-04-24T17:20:47.800Z"},"bugs":{"url":"https://github.com/ahnandev/bidirectional-infinite-scroll/issues"},"license":"MIT","homepage":"https://github.com/ahnandev/bidirectional-infinite-scroll#readme","keywords":["infinite-scroll","bidirectional","scrollIntoView","virtual-scroll","intersection-observer"],"repository":{"type":"git","url":"git+https://github.com/ahnandev/bidirectional-infinite-scroll.git"},"description":"Lightweight bidirectional infinite scroll using scrollIntoView","maintainers":[{"name":"ahnandev","email":"lsy0044@gmail.com"}],"readme":"# bidirectional-infinite-scroll\n\n![Grid to list UI mock](./.github/assets/grid-to-list-mock.png)\n\nLightweight bidirectional infinite scroll\n\nIt uses standard web APIs such as `IntersectionObserver` and `scrollIntoView` instead of scroll listeners and manual `scrollTop` correction. The package currently exposes the React APIs `useBidirectionalScroll` and `FetchMore`.\n\n[한국어 문서](./README.ko.md)\n\n## Install\n\n```bash\nnpm install @ahnandev/bidirectional-infinite-scroll\n```\n\nLive demo: [ahnandev.github.io/bidirectional-infinite-scroll](https://ahnandev.github.io/bidirectional-infinite-scroll/)\n\nReact support is smoke-tested against `16.14.0`, `17.0.2`, `18.3.1`, and `19.2.0`.\n\n```bash\nnpm run test:react-matrix\nnpm run demo:react -- 16\n```\n\n## How To Use\n\n### React\n\n```tsx\nimport {\n  FetchMore,\n  useBidirectionalScroll,\n} from \"@ahnandev/bidirectional-infinite-scroll\";\n\nfunction Feed({\n  items,\n  anchorId,\n  hasPreviousPage,\n  hasNextPage,\n  loadPrevious,\n  loadNext,\n}) {\n  const { itemRef } = useBidirectionalScroll({\n    anchorId,\n  });\n\n  return (\n    <div>\n      <FetchMore hasMore={hasPreviousPage} onIntersect={loadPrevious} />\n\n      {items.map((item, index) => (\n        <div key={item.id} ref={itemRef({ itemId: item.id, index })}>\n          {item.title}\n        </div>\n      ))}\n\n      <FetchMore hasMore={hasNextPage} onIntersect={loadNext} />\n    </div>\n  );\n}\n```\n\n`useBidirectionalScroll`: React hook for bidirectional infinite scroll.\n\n- `itemRef({ itemId, index })`: pass each item's id and index to the rendered item.\n- optional) `anchorId`: use this when you want the list to start from a specific item.\n- optional) `scrollOptions`: custom `scrollIntoView` options. Defaults to `{ behavior: 'instant', block: 'start' }`.\n- optional) `safariCorrection`: enables double-rAF correction to reduce Safari layout shift. Defaults to `true`.\n- optional) `FetchMore`: helper component. You can provide your own `IntersectionObserver` trigger if you prefer.\n- optional) `anchorRef` and `firstItemRef`: low-level refs for manual control.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}