EndlessFlow

A lightweight and customizable infinite scroll library for React applications.

Features

Effortless infinite scrolling
Customizable API integration
Lightweight and simple to integrate
Handles loading states and supports querying for filtering data

Get Started

Installation

npm install endlessflow

Basic Usage

import useFetcher, { InfiniteScroll } from "endlessflow";
  import { Loader2 } from "lucide-react";
  
  const {
    datas: users, // Fetched data
    loading,      // Loading state
    hasMore,      // Indicates if there's more data to fetch
    next,         // Function to fetch the next set of data
  } = useFetcher({
    endpoint: "http://localhost:5000/get-data",
    firstFilter: "recentlyAdded", // Optional filter
    secondFilter: id,            // Optional filter
    thirdFilter: "Default",      // Optional filter
    limit: 6,                    // Number of items per fetch (default: 5)
  });
  
  return (
    <>
      <div>
        {users.map((user) => (
          <div key={user.id}>{user.name}</div>
        ))}
      </div>
  
      <InfiniteScroll
        hasMore={hasMore}
        isLoading={loading}
        next={next}
        threshold={1}
      >
        {hasMore && (
          <div className="flex font-bold text-xl justify-center items-center my-12">
            <Loader2 className="h-12 w-12 animate-spin text-black" />
            loading....
          </div>
        )}
      </InfiniteScroll>
    </>
  );