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 handling paginated data and infinite scrolling with easy-to-use hooks and components.

Features

Effortless infinite scrolling.
Customizable API integration.
Lightweight and simple to integrate.
Handles loading states and refresh controls.

Installation

Install via npm:

npm install endlessflow

Usage

Example Code

import useFetcher, { InfiniteScroll } from "endlessflow";

const { datas: vehicles, loading, hasMore, next, handleRefresh } = useFetcher({
  endpoint: "/api/get-vehicles-byquery",
  firstFilter: "recentlyAdded",
  secondFilter: id,
  thirdFilter: "Default",
});

return (
  <InfiniteScroll
    hasMore={hasMore}
    isLoading={loading}
    next={next}
    threshold={1}
  >
    {vehicles.map(vehicle => (
      <div key={vehicle.id}>{vehicle.name}</div>
    ))}
    {hasMore && (
      <Loader2 className="my-12 h-12 w-12 animate-spin text-black" />
    )}
  </InfiniteScroll>
);

API Reference

`useFetcher`

Parameters:

Parameter	Type	Required	Description
`endpoint`	`String`	Yes	The API endpoint to fetch data from.
`firstFilter`	`String`	No	The first filter for the API query.
`secondFilter`	`String`	No	The second filter for the API query.
`thirdFilter`	`String`	No	The third filter for the API query.

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 page of data.
`handleRefresh`	`Function`	Function to refresh the data.

`InfiniteScroll`

Props:

Prop	Type	Required	Description
`hasMore`	`Boolean`	Yes	Indicates if there is more data to fetch.
`isLoading`	`Boolean`	Yes	Indicates if the data is currently being loaded.
`next`	`Function`	Yes	Function to fetch the next page of data.
`threshold`	`Number`	No	Determines how close to the bottom of the page (in pixels) the user must scroll before triggering the `next` function. Default: `300`

License

This project is licensed under the ISC License.