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.