use-react-infinite-scroll

A hook to make all your infinite scrolling and loading more with just <1kB and one line code! Pull Down to Load More feature actually works and super-simple to integrate!

Installation

npm

npm install use-react-infinite-scroll

yarn

yarn add use-react-infinite-scroll

import

import { useInfiniteScroll } from "use-react-infinite-scroll"

usage

Use function as a React hook

useInfiniteScroll(listRef, loadMore)

listRef is ref to your list container like <div className="list" ref={listRef}></div>.

loadMore is loadMore function you want to pass when window scrolling touch end of list.

Live examples (Sandbox)

• Infinite scrolling, load more function with react.

Typescript

Javascript

Code examples

Typescript

1import React, { useRef, useState } from "react";
2import { useInfiniteScroll } from "use-react-infinite-scroll";
3
4// init fakeApi
5type TDataItem = {
6  id: number;
7  title: string;
8};
9let listFakeData: TDataItem[] = [];
10for (let i = 1; i <= 500; i++) {
11  listFakeData.push({
12    id: i,
13    title: `Title ${i}`,
14  });
15}
16
17export function fakeApi(offset: number, limit: number) {
18  return new Promise<{
19    list: TDataItem[];
20    total: number;
21  }>((resolve, reject) => {
22    setTimeout(() => {
23      resolve({ list: listFakeData.slice(offset, offset + limit), total: 500 });
24    }, 500);
25  });
26}
27
28// component with infinite load
29const LIMIT = 20;
30
31function ListItem() {
32  const listRef = useRef<HTMLDivElement>(null);
33  const [dataObj, setDataObj] = useState<{
34    list: TDataItem[];
35    total: number;
36  }>({
37    list: [],
38    total: -1, // init for first load
39  });
40  const [isFetching, setIsFetching] = useState(false);
41  async function fetchList() {
42    setIsFetching(true);
43    // call api to fetch data here
44    const response = await fakeApi(dataObj.list.length, LIMIT);
45    setDataObj((state) => {
46      return {
47        list: [...state.list, ...response.list],
48        total: response.total, // set total from api response
49      };
50    });
51    setIsFetching(false);
52  }
53  const loadMore = () => {
54    if (isFetching !== true) {
55      if (dataObj.total === -1 || dataObj.list.length < dataObj.total) {
56        fetchList();
57      }
58    }
59  };
60
61  // apply detect scroll
62  useInfiniteScroll(listRef, loadMore);
63  return (
64    <div className="container">
65      <div className="list-item" ref={listRef}>
66        {dataObj.list.map((item) => {
67          return (
68            <div key={item.id}>
69              <h1>{item.title}</h1>
70            </div>
71          );
72        })}
73      </div>
74      {isFetching ? <div>Loading...</div> : null}
75    </div>
76  );
77}
78
79export default ListItem;

Javascript

1import React, { useRef, useState } from "react";
2import { useInfiniteScroll } from "use-react-infinite-scroll";
3
4// init fakeApi
5let listFakeData = [];
6for (let i = 1; i <= 500; i++) {
7  listFakeData.push({
8    id: i,
9    title: `Title ${i}`,
10  });
11}
12function fakeApi(offset, limit) {
13  return new Promise((resolve, reject) => {
14    setTimeout(() => {
15        resolve({ list: listFakeData.slice(offset, offset + limit), total: 500 });
16    }, 500);
17  });
18}
19
20// component with infinite load
21const LIMIT = 20;
22function ListItem() {
23  const listRef = useRef(null);
24  const [dataObj, setDataObj] = useState({
25    list: [],
26    total: -1, // init for first load
27  });
28  const [isFetching, setIsFetching] = useState(false);
29  async function fetchList() {
30    setIsFetching(true);
31    // call api to fetch data here
32    const response = await fakeApi(dataObj.list.length, LIMIT);
33    setDataObj((state) => {
34      return {
35        list: [...state.list, ...response.list],
36        total: response.total, // set total from api response
37      };
38    });
39    setIsFetching(false);
40  }
41  const loadMore = () => {
42    if (isFetching !== true) {
43      if (dataObj.total === -1 || dataObj.list.length < dataObj.total) {
44        fetchList();
45      }
46    }
47  };
48  // apply detect scroll
49  useInfiniteScroll(listRef, loadMore);
50  return (
51    <div className="container">
52      <div className="list-item" ref={listRef}>
53        {dataObj.list.map((item) => {
54          return (
55            <div key={item.id}>
56              <h1>{item.title}</h1>
57            </div>
58          );
59        })}
60      </div>
61      {isFetching ? <div>Loading...</div> : null}
62    </div>
63  );
64}
65export default ListItem;

props

useInfiniteScroll(listRef, loadMore)

name	type	description
param listRef	RefObject | null	is ref to your list container like <div className="list" ref={listRef}></div>
param loadMore	function	loadMore function you want to pass when window scrolling touch end of list

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Steve 📖

This project follows the all-contributors specification. Contributions of any kind are welcome!

License

MIT