Package Exports

endlessflow

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (endlessflow) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.