# super-react-infinite-scroll

Often wondered how facebook or instagram lazily loads data on page scroll and show loading animation? 

Well this library provides you with the react component to show loaders while you do API calls or any other async operations.

# Installation

Use npm to install super-react-infinite-scroll

```
npm install super-react-infinite-scroll
```

# Usage

First import super-react-infinite-scroll in to your project
```
import SuperReactInfiniteScroll from 'super-react-infinite-scroll';

```

```
const dataList = [
 <p> item1 </p>,
 <p> item2 </p>
];

const onScrollComplete = () =>{
  console.log('DO API call and get more data');
};

 <SuperReactInfiniteScroll
        loaderElem={<p> Loading..</p>}        
        onScrollComplete={onScrollComplete}
        dataList={dataList}
        totalDataLength={100}
  />
```

Refer `dev/index.js` to know the usage better.

# Props Usage

| Props              | Description                                                |     Type          | Defaults      |
| -------------      | -------------                                              | ---------------   | -----------   |
| loaderElem         | React element to render on lazy fetch                      | React.Element     |               |
| onScrollComplete   | callback function which is callled when scroll comes to end| Function          |            | 
| dataList           | List of react elements to render                | ArrayOf(React.Element)             |               |
|totalDataLength     | Length of Total/final records that will be loaded          | Number            |               | 
|scrollThresholdPercent| Threshold to call onScrollComplete before scrolling till end of the page| Number| 95         |


# Run app locally

To run the dev app locally run the following 

```
npm run start:dev
```

This project is integrated with mocha and chai for unit testing. To test the code run

```
npm test
```