endlessflow/README.md

A lightweight and customizable infinite scroll library

# EndlessFlow

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

<sub>For more details and documentation, visit [EndlessFlow Website](https://endless-flow-docs.vercel.app/).</sub>
---


## 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:

```bash
npm install endlessflow
```

---


## Usage

### Example Code

```jsx
// 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:
  ```typescript
  //@ts-ignore
  import useFetcher, { InfiniteScroll } from "endlessflow";
  ```

---


## License

This project is licensed under the ISC License.