infinite-scroller-react v0.0.2

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

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