React Endless Scrolling

react-endless-scrolling is a React component for efficiently implementing infinite scrolling in large data sets without sacrificing application performance.

Installation

Install the package using npm:

npm install react-endless-scrolling

Usage

To use the InfiniteScroll component, simply import it from the package and wrap your list or data set with it.

Here's a basic example:

import React, { useState, useCallback } from 'react';
import InfiniteScroll from 'react-endless-scrolling';

const fetchImages = async (page) => {
  const response = await fetch(`https://api.unsplash.com/photos?client_id=YOUR_UNSPLASH_ACCESS_KEY&page=${page}&per_page=10`);
  const data = await response.json();
  return data;
};

const ImageGallery = () => {
  const [images, setImages] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const loadMoreImages = useCallback(async () => {
    const newImages = await fetchImages(page);
    if (newImages.length === 0) {
      setHasMore(false);
    } else {
      setImages((prevImages) => [...prevImages, ...newImages]);
      setPage((prevPage) => prevPage + 1);
    }
  }, [page]);

  return (
    <InfiniteScroll
      hasMore={hasMore}
      loadMore={loadMoreImages}
      onNewItem={() => console.log('New image added')}
    >
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {images.map((image) => (
          <<div key={image.id} style={{ width: 'calc(33.33% - 10px)', margin: '5px' }}>>
            <img src={image.urls.small} alt={image.description} style={{ width: '100%', height: 'auto' }} />
          <</div>>
        ))}
      </div>
    </InfiniteScroll>
  );
};

export default ImageGallery;

Props

| Prop | Type | Default | Description | | --------- | -------- | ------- | ------------------------------------------------------------------------------------------------- | | children | node | - | The content to be rendered inside the infinite scroll container. | | hasMore | bool | - | A boolean indicating whether there are more items to load. | | loadMore | function | - | A function to be called when more items need to be loaded. | | onNewItem | function | null | An optional function to be called when a new item is added to the list. | | threshold | number | 250 | The distance (in pixels) from the bottom of the scroll container at which loadMore is triggered.|