1.0.9 • Published 4 years ago
react-scroll-to-fetch v1.0.9
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 aPromise
.Or if you declare the_fetch
function asasync
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 usingasync/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