React Infinite Scroller Component

A highly customizable, TypeScript-based infinite scroll component for React applications with pull-to-refresh functionality.

Features

• 🔄 Infinite scrolling with customizable threshold
• ⬇️ Pull-to-refresh support for mobile devices
• 📱 Custom scrollable container support
• 🎨 Fully customizable loading and error states
• 🔧 TypeScript support
• ⚡ Performance optimized with throttling
• 🎯 Error boundary integration
• 📦 Zero dependencies (except React)

Installation

npm install infinite-scroller-react
# or
yarn add infinite-scroller-react

Basic Usage

import { InfiniteScroll } from 'infinite-scroller-react';

function MyComponent() {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  const loadMore = async () => {
    setIsLoading(true);
    try {
      const newItems = await fetchMoreItems();
      setItems(prev => [...prev, ...newItems]);
      setHasMore(newItems.length > 0);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <InfiniteScroll
      loadMore={loadMore}
      hasMore={hasMore}
      isLoading={isLoading}
      loader={<div>Loading...</div>}
    >
      {items.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
    </InfiniteScroll>
  );
}

Advanced Usage

With Pull-to-Refresh

<InfiniteScroll
  loadMore={loadMore}
  hasMore={hasMore}
  isLoading={isLoading}
  pullDownToRefresh={true}
  pullDownThreshold={100}
  onRefresh={handleRefresh}
  refreshComponent={<div>Pull to refresh...</div>}
  onError={handleError}
>
  {/* Your children content */}
</InfiniteScroll>

With Custom Scrollable Container

<div id="scrollable-container" style={{ height: '500px', overflow: 'auto' }}>
  <InfiniteScroll
    loadMore={loadMore}
    hasMore={hasMore}
    scrollableTarget="scrollable-container"
    threshold={200}
    scrollThrottle={150}
  >
    {/* Your content */}
  </InfiniteScroll>
</div>

Props

Prop	Type	Required	Default	Description
loadMore	() => Promise<void>	Yes	-	Function to load more items
hasMore	boolean	Yes	-	Whether there are more items to load
isLoading	boolean	No	false	Loading state
threshold	number	No	100	Distance from bottom (in px) to trigger loading
loader	ReactNode	No	null	Loading indicator component
className	string	No	-	CSS class for the container
scrollableTarget	string | HTMLElement	No	window	Custom scrollable container
initialLoad	boolean	No	true	Whether to load data on mount
onError	(error: Error) => void	No	-	Error handler callback
loadingComponent	ReactNode	No	loader	Custom loading component
endMessage	ReactNode	No	-	Message shown when no more items
pullDownToRefresh	boolean	No	false	Enable pull-to-refresh
pullDownThreshold	number	No	100	Pull distance to trigger refresh
refreshComponent	ReactNode	No	-	Pull-to-refresh indicator
onRefresh	() => Promise<void>	No	-	Refresh callback function
scrollThrottle	number	No	150	Scroll event throttle in ms

Best Practices

1. Error Handling

   const handleError = (error: Error) => {
     console.error('Loading failed:', error);
     // Show user-friendly error message
   };

2. Loading States

   const LoadingSpinner = () => (
     <div className="loading-spinner">
       <div className="spinner"></div>
       <p>Loading more items...</p>
     </div>
   );

3. Pull-to-Refresh Implementation

   const handleRefresh = async () => {
     // Reset state
     setPage(1);
     setHasMore(true);
     
     // Fetch fresh data
     const freshData = await fetchData(1);
     setItems(freshData);
   };

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT