open_infinity_scroll

A custom React component for infinite scrolling.

Installation

npm install open_infinity_scroll

Description

OpenInfinityScroll is a React component that provides infinite scrolling functionality. It uses an IntersectionObserver to detect when the user scrolls near the bottom of a list, triggering a callback to load more data.

API Reference

Props

The GlobalLayoutObserver component accepts the following props:

• callBack: ({ page: number, pageSize: number, searchTerm?: string }) => void Function to call to fetch more data.

• currentPage: number The current page number.

• hasNextPage: boolean Indicates if there are more pages to load.

• isLoading: boolean Indicates if data is currently being loaded.

• loaderLayout: React.ReactNode Component to display while data is loading.

• noloader?: React.ReactNode Optional component to display when there are no more items.

• pageSize?: number The number of items to fetch per page. Defaults to 10.

• searchTerm?: string The current search term, if any.

Usage Example

import React, { useState } from "react";
import OpenInfinityScroll from "open_infinity_scroll";

function MyInfiniteScrollList() {
  const [items, setItems] = useState([]);
  const [currentPage, setCurrentPage] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [hasNextPage, setHasNextPage] = useState(true);

  const fetchData = async ({ page, pageSize, searchTerm }) => {
    setIsLoading(true);
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    const newItems = Array.from(
      { length: pageSize },
      (_, i) => `Item ${page * pageSize + i + 1}`
    );
    setItems((prevItems) => [...prevItems, ...newItems]);
    setCurrentPage(page);
    setHasNextPage(page < 5); // Example: stop after 5 pages
    setIsLoading(false);
  };

  return (
    <div>
      <h1>Infinite Scroll Example</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <OpenInfinityScroll
        callBack={fetchData}
        pageSize={10}
        isLoading={isLoading}
        currentPage={currentPage}
        hasNextPage={hasNextPage}
        loaderLayout={<div>Loading more items...</div>}
        noloader={<div>You've reached the end!</div>}
      />
    </div>
  );
}

export default MyInfiniteScrollList;