https://github.com/gmdworkspace/super-react-infinite-scroll
SuperReactInfiniteScroll is a react component to show loaders while you do API calls or any other async operations.
https://github.com/gmdworkspace/super-react-infinite-scroll
infinite-loading infinite-scroll infinite-scroll-plugin react
Last synced: 2 months ago
JSON representation
SuperReactInfiniteScroll is a react component to show loaders while you do API calls or any other async operations.
- Host: GitHub
- URL: https://github.com/gmdworkspace/super-react-infinite-scroll
- Owner: gmdworkspace
- Created: 2018-05-13T08:20:17.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-27T16:21:47.000Z (about 8 years ago)
- Last Synced: 2025-08-19T03:27:44.787Z (10 months ago)
- Topics: infinite-loading, infinite-scroll, infinite-scroll-plugin, react
- Language: JavaScript
- Homepage:
- Size: 707 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# super-react-infinite-scroll
[](https://travis-ci.org/gmdworkspace/super-react-infinite-scroll)
[](https://badge.fury.io/js/super-react-infinite-scroll)
[](https://opensource.org/licenses/MIT)
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 = [
item1
,
item2
];
const onScrollComplete = () =>{
console.log('DO API call and get more data');
};
Loading..}
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
```