react-scroll-to-fetch

1.0.9 • Public • Published

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.

NPM JavaScript Style Guide

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

Install

DownloadsWeekly Downloads

1

Version

1.0.9

License

MIT

Unpacked Size

557 kB

Total Files

6

Last publish

Collaborators

  • xynes