EndlessFlow

EndlessFlow is a lightweight and customizable infinite scroll library for React applications. It simplifies infinite scrolling with easy-to-use components.

For more details and documentation, visit EndlessFlow Website.

Features

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

Installation

Install via npm:

npm install endlessflow

Usage

Example Code

// Import the library
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: "/api/get-users-byquery",
  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>
  </>
);

API Reference

useFetcher

Parameters:

| Parameter | Type | Required | Description | | -------------- | -------- | -------- | -------------------------------------------------------- | | endpoint | String | Yes | The API endpoint to fetch data from. | | firstFilter | String | No | An optional filter to include in the API query. | | secondFilter | String | No | Another optional filter to include in the API query. | | thirdFilter | String | No | An optional third filter to include in the API query. | | limit | number | No | Number of items to fetch per request (default: 5). |

Returns:

| Return Value | Type | Description | | --------------- | ---------- | ------------------------------------------------ | | datas | Array | The fetched data. | | loading | Boolean | Indicates if the data is currently being loaded. | | hasMore | Boolean | Indicates if there is more data to fetch. | | next | Function | Function to fetch the next set of data. |

InfiniteScroll

Props:

| Prop | Type | Required | | ----------- | ---------- | -------- | | hasMore | Boolean | Yes | | isLoading | Boolean | Yes | | next | Function | Yes | | threshold | Number | yes |

Troubleshooting

TypeScript Users

If you encounter TypeScript issues with this library:

• Ensure that your TypeScript configuration allows the use of third-party libraries without type definitions.
• If necessary, temporarily use the //@ts-ignore directive above the import statement to suppress errors:

  //@ts-ignore
  import useFetcher, { InfiniteScroll } from "endlessflow";

License

This project is licensed under the ISC License.