React-infinite-scroll-comp NPM

React Infinite Scroll with Hooks

Add infinite scroll feature to your applications with React Infinite Scroll Component. You can use it anywhere in any condition.

About The Project

This project's purpose is to provide an easy solution for implementing infinite scroll feature to the web applications. The infinite scroll component is built with Observer Pattern and React Hooks.

Installation

npm i react-infinite-scroll-comp --save

yarn add react-infinite-scroll-comp

Usage

Import component at top level:

import { InfiniteScroll } from 'react-infinite-scroll-comp';

DOM scroll events

/*
Infinite scroll component fills the whole width and height of its wrapper. 
Style your wrapper div accoordingly.
*/
<div style={{ height: '300px' }}>
    <InfiniteScroll 
        Loader = <MyCustomLoader />,
        hasMore,
        callBack = {myCallBack},
        containerStyle = {},
        useLoader = true,
        useTopScroll = true,
    >
    {data.map(num => (
        <div key={num} style={style}>
        {num}
        </div>
    ))}
    </InfiniteScroll>
</div>

Example Component

import React, { useState } from 'react';
import { InfiniteScroll } from 'react-infinite-scroll-comp';

const addTenItems = data => {
  const newData = [...data];
  const base = newData.length;

  for (let i = 1; i <= 10; i++) {
    newData.push(base + i);
  }
  return newData;
};

const style = {
  border: '1px solid blue',
  height: '30px',
  margin: '5px',
  padding: '10px',
};

const MyComp = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

  const callBack = () => {
    setTimeout(() => setData(d => addTenItems(d)), 1500);
  };

  return (
    <div style={{ height: '300px' }}>
      <InfiniteScroll hasMore={data.length < 50} callBack={callBack}>
        {data.map(num => (
          <div key={num} style={style}>
            {num}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default MyComp;

Props

Name	Required	Type	Default	Descriptionn
Loader	no	element	three dots	Loader spinner to show when callback function is called.
useLoader	no	boolen	true	Whether to show loader or not.
hasMore	yes	boolean	---	If there are more items to be loaded.
callBack	yes	function	---	A callback when more items are requested by the user.
containerStyle	no	CSSProperties	{ }	Style for wrapper div of items.
children	yes	element	---	Content for infinite scroll.
useTopScroll	no	boolean	false	Reverse scroll direction from top-to-bottom to bottom-to-top.