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>
    )
}

License

MIT © xynes