use-buffered-pagination

React hook to achieve memory-efficient buffered pagination

Showcase

1function Component() {
2    const [searchQuery, setSearchQuery] = useState("");
3
4    const pagination = useBufferedPagination<number>({
5        query: searchQuery, // a buffer will be created for every different query
6        count: undefined, // if not set, will be calculated after fetching
7        page: 0, // the initial page for the current query
8        pageSize: 0, // the initial page size
9        pageBufferRadius: 1, // the radius of the buffer
10        queryBackstackSize: 1, // how many query buffers can be retain at once
11        async fetch(params) {
12            // the first (default) range to fetch
13            params.range;
14            // the first range with padding
15            params.paddedRange;
16            // the currently known items count
17            params.count;
18            // negative if the user is paginating backwards 
19            // and positive when paginating forwards 
20            params.direction;
21            // the list of all the ranges to be fetch (if possible)
22            params.ranges;
23
24            const [dataOffset, data] = myFetchFunction(params);
25
26            return {
27                remaining, // the remaining items, can be omitted or be a negative value
28                slices: [
29                    new BufferSlice(dataOffset, data)
30                    // it is allowed to pass more than one slice
31                    // the slices will be joind and arranged 
32                    // depending on the offset of each slice
33                ]
34            };
35        }
36    });
37
38    // page control
39    pagination.page;
40    pagination.setPage;
41    pagination.pageSize;
42    pagination.setPageSize;
43
44    // data
45    pagination.count;
46    pagination.pageCount;
47    pagination.loading;
48    pagination.sequential; // if all the items is available
49    pagination.absence; // the absent ranges in the data
50    pagination.data;
51
52    pagination.fetch(/* ... */); // force the hook to fetch some range
53    pagination.insert(/* ... */); // insert data directly to the hook
54
55    return <></>;
56}