endlessflow v1.5.0

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:

Returns:

InfiniteScroll

Props:

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.