@osama-yousuf/react-infinite-scroll-hook

A powerful, production‑ready React Infinite Scroll Hook with:

✅ Axios support ✅ Token / Bearer authentication ✅ Custom API routes ✅ GET / POST / PUT / DELETE ✅ Params OR Body pagination ✅ AbortController handling ✅ Works with any API response shape ✅ Fully TypeScript typed (IDE suggestions enabled)

📦 Installation

npm install @osama-yousuf/react-infinite-scroll-hook axios react

If you're using TypeScript, also install:

npm install -D typescript @types/react

✅ Basic Usage (GET API)

import { useInfiniteScroll } from "@osama-yousuf/react-infinite-scroll-hook";

const App = () => {
  const { data, lastElementRef, loading } = useInfiniteScroll({
    url: "https://api.example.com/users",
    method: "GET",
    params: { status: "active" },
    accessorKey: "data.data",
  });

  return (
    <>
      {data.map((item, index) => (
        <div
          key={item.id}
          ref={data.length === index + 1 ? lastElementRef : null}
        >
          {item.name}
        </div>
      ))}

      {loading && <p>Loading...</p>}
    </>
  );
};

✅ POST API With Body + Token

const { data, refresh } = useInfiniteScroll({
  url: "https://api.example.com/orders",
  method: "POST",
  body: {
    startDate: "2024-01-01",
    endDate: "2025-01-01",
  },
  token: "YOUR_BEARER_TOKEN",
  accessorKey: "data.data",
});

✅ With Custom Axios Instance

import axios from "axios";

const apiInstance = axios.create({
  baseURL: "https://api.example.com",
});

useInfiniteScroll({
  url: "/orders",
  instance: apiInstance,
  method: "POST",
});

✅ With Search + Filters

const params = {
  query: searchValue,
  status: selectedStatus,
};

useInfiniteScroll({
  url: "/users",
  params,
});

✅ Hook Options

| Option | Type | Description | | ----------- | ------------- | ---------------------- | | url | string | API endpoint | | method | string | GET, POST, PUT, DELETE | | params | object | Query parameters | | body | object | Request body | | token | string | Bearer token | | instance | AxiosInstance | Custom axios instance | | accessorKey | string | Path to response data |

✅ Returned Values

{
  data,
  lastElementRef,
  loading,
  hasMore,
  refresh
}

| Key | Description | | -------------- | ---------------------- | | data | Loaded items | | lastElementRef | Attach to last element | | loading | API loading state | | hasMore | Indicates more data | | refresh | Manually reload |

✅ Pagination Key Support

Default uses pageNo. If your API uses another key:

params: {
  page: 1
}

✅ Manual Refresh

<button onClick={refresh}>Refresh</button>

✅ Debounced Search Example

const [search, setSearch] = useState("");
const [debouncedSearch, setDebouncedSearch] = useState("");

useEffect(() => {
  const timer = setTimeout(() => setDebouncedSearch(search), 500);
  return () => clearTimeout(timer);
}, [search]);

✅ Abort Controller Auto Handling

Previous API requests are automatically cancelled when new API is triggered.

✅ TypeScript Support

Fully typed for:

✅ Axios Instance ✅ Props ✅ API response ✅ State ✅ IDE auto‑suggestions

✅ Example API Response

{
  "data": {
    "data": [
      { "id": 1, "name": "John" }
    ]
  }
}

Accessor used:

accessorKey: "data.data"

🧠 Best Practices

✔ Always debounce search inputs ✔ Always use accessorKey ✔ Use instance for large apps ✔ Use token for secured APIs

🧑‍💻 Author

Osama Yousuf GitHub: https://github.com/osamayousuf90

⭐ Support

If you like this package:

✅ Star it on GitHub ✅ Share it with devs ✅ Contribute 🔥

🔍 Keywords

react infinite scroll hook, react infinite scroll, infinite scroll hook, react pagination hook, axios infinite scroll, react data fetching hook, intersection observer, typescript react hook

📜 License

MIT License