react-scroll-to-fetch

Fetch Data from server as you scroll down with a simple lightweight React Component. Saves you all the troubles from designing a pagination system. This lightweight library works both with window scroll event and scrollable div elements.

Demo

Install

npm install --save react-scroll-to-fetch

Usage

For Window Scroll

import React, { Component } from 'react'
import ScrollToFetch from 'react-scroll-to-fetch'
class Example extends Component {
  render () {
    return (
      <ScrollToFetch
        fetch={this._fetch} 
        finished={this.state.finished}
        initialLoad={true}
        loader={<div style={{textAlign:'center'}}>Loading...</div>}
        successMessage={<div style={{textAlign:'center'}}>No more data to load</div>}
        >{//You dynamic Component that is updated by the fetch function}
        </ScrollToFetch>
    )
  }
}

The _fetch function recieves one parameter , i.e. page and should return a Promise.Or if you declare the _fetch function as async it will work.

An example of the `_fetch` function

_fetch=(page)=>{
    return new Promise((resolve,reject)=>{
        axios.get("https://domain.tdl/api/getlist?page="+page)
        .then(resp=>{
            if(resp.data.success){
                //handle data
                resolve(resp.data);
            }else{
                //handle error
                reject(resp.data.msg);
            }
        })
        .cathc(err=>{
            //handle error
            reject(err.message);
        }
    });
}

An example of the `_fetch` function using `async/await`

_fetch=async (page)=>{
    try{
        const resp=await axios.get("https://domain.tdl/api/getlist?page="+page);
        if(resp.data.status){
            //handle data
        }else{
            //handle error
        }
    }catch(e){
        //handle error
    }
}

Here is a list of all props :

Name	Required	Type	Default	Description
fetch	`true`	`func`		A callback to retrive data from the server.
initialLoad	`true`	`bool`		A flag to tell ScrollTofetch if it should fetch the first page without scrolling
finished	`true`	`bool`	false	No more data will be fetched from the server when set to `true`.
loader	`false`	`element`	`<div> Loading... </div>`	A message to show on the bottom of the list. You can replace it with you beautiful loading animation.
successMessage	`false`	`element`	`<div> No more data to load`	A message to show when fetching is complete, i.e. `finished` prop is set to `true`.
scrollParent	`false`	`string`		`id` of the scrollable `div`. If you want `ScrollToFetch` to listen to `window` scroll events rather than any parent `div` then do not use this prop.
currentPage	`false`	`number`		To manually controll the page no. Click here for more information.
className	`false`	`string`		pass className as a prop
style	`false`	`object`		pass style as a prop

Manually Controll the Page Number :

Generally if the ScrollToFetch Component gets unmounted, the page no will be reset to zero. Now if you use a global state for the fetched list then there will be problem. To overcome this you can controll the page number with currentPage props. Here is an example.

loadData=async (page)=>{
    this.props.setCurrentPage(page);
    //fetch data
}
render(){
    return (
    <ScrollToFetch
    fethc={this.loadData}
    currentPage={this.props.current_page}
    >
    {//iterate through the loaded list}
    </ScrollToFetch>
    )
}