react-infinite-scroll

on npm (https://www.npmjs.com/package/@amirkzm/react-infinite-scroll)

About

react-infinite-scroll is a package that provides smooth scrooling on a long list of items when items need to be load from a server on the fly. It uses react-window library under the hood.

Quick Start

npm install @amirkzm/react-infinite-scroll
Or by yarn:
yarn add @amirkzm/react-infinite-scroll

1<InfiniteLoader
2        renderFunction={listItem}
3        addressGenerator={addressGenerator}
4        dataExtractor={ (serverResult) => {//generate array if not} }
5        style={{ backgroundColor: "red" }}
6        width={400}
7        height={300}
8        itemSize={40}
9        itemCount={200}
10      />

Table of Content

1. The problem 
2. Solution
3. Usage 
4. Props
5. License

Problem

Suppose that we have a long list of item to display and server uses pagination to handle that long list of items. We want to load and show all those items in a smooth way as user scroll the page.

Solution

react-infinite-scroll helps us to fetch and show new data as user scroll down.

Usage

here is a brief code sample for solving the mentioned problem above:

1import {InfiniteLoader} from "@amirkzm/react-infinite-scroll;
2
3interface ItemProps {
4  data: any[];
5  index: any;
6  style: any;
7}
8
9const addressGenerator = (page: number): string => {
10  return someUrl;
11};
12
13const dataExtractor = (response: any) => {};
14
15function someComponent() {
16  return (
17    <div>
18      <InfiniteLoader
19        renderFunction={listItem}
20        addressGenerator={addressGenerator}
21        dataExtractor={ (serverResult) => {//generate array if not} }
22        style={{ backgroundColor: "red" }}
23        width={400}
24        height={300}
25        itemSize={40}
26        itemCount={500}
27        loadingElement={<p>Loading...</p>}
28      />
29    </div>
30  );
31}
32
33const listItem = ({ data, index, style }: ItemProps): JSX.Element => {
34  return (
35    <div style={style}>
36      {data[index].id} {data[index].name}
37    </div>
38  );
39};

Props

Props	Types	Description
renderFunction	(data:any, index:number, style:any) => JSX.Element	React component responsible for rendering the individual item specified by an index prop. This component also receives style props(used for positioning) and a data prop.
addressGenerator	(pageNumber:number) => string	A function that recieves page number and generate the address of that page number to fetch data from.
dataExtractor	(response:any) => any[]	An optional function that convert the desired result from server to an array. if server response is an array by itself leave we don't need to pass this function.
loadingElement	ReactNode	An Optional ReactNode element if we want to show user as loading
errorElement	ReactNode	An Optional ReactNode element if we want to show user as error
itemCount	number or (response:any) => number	Total number of items we want to render. It can be a number or a function that recieve the response of the server and return the total number of elements in case server returns it.
width	number	Specify the width of the list. It can be a number or string
itemSize	number	Size of a item in the direction being windowed. For vertical lists, this is the row height. For horizontal lists, this is the column width.

You can also pass all the props of the react-window package props on their documents.

license

MIT