Skip to content

feat: add useInfiniteScroll hook#426

Merged
iamdarshshah merged 4 commits intomasterfrom
feat/use-infinite-scroll-hook
Apr 27, 2026
Merged

feat: add useInfiniteScroll hook#426
iamdarshshah merged 4 commits intomasterfrom
feat/use-infinite-scroll-hook

Conversation

@iamdarshshah
Copy link
Copy Markdown
Collaborator

Summary

  • Adds useInfiniteScroll hook as a named export from the package
  • Uses the same IntersectionObserver sentinel pattern as the component, with stable callback refs to avoid observer churn
  • Adds JSDoc to the full Props interface in src/index.tsx for IDE autocomplete
  • Adds a useInfiniteScroll (hook) Storybook story demonstrating a fully custom list UI

Usage

import { useInfiniteScroll } from 'react-infinite-scroll-component';

const { sentinelRef, isLoading } = useInfiniteScroll({
  next: fetchMore,
  hasMore,
  dataLength: items.length,
});

return (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)}
    <li ref={sentinelRef} aria-hidden="true" />
    {isLoading && <li>Loading...</li>}
  </ul>
);

Test plan

  • yarn ts-check passes
  • yarn test — 54/54 tests pass
  • useInfiniteScroll (hook) story renders and triggers load on scroll

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 27, 2026

Size Change: +1.24 kB (+15.14%) ⚠️

Total Size: 9.43 kB

📦 View Changed
Filename Size Change
dist/index.es.js 4.69 kB +593 B (+14.49%) ⚠️
dist/index.js 4.74 kB +647 B (+15.8%) ⚠️

compressed-size-action

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.87%. Comparing base (d99aff0) to head (9975ecf).

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #426      +/-   ##
==========================================
+ Coverage   95.03%   95.87%   +0.84%     
==========================================
  Files           3        4       +1     
  Lines         161      194      +33     
  Branches       57       65       +8     
==========================================
+ Hits          153      186      +33     
  Misses          4        4              
  Partials        4        4              
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@iamdarshshah iamdarshshah merged commit cfd26d5 into master Apr 27, 2026
27 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant