# react-scroll-to-fetch

> An infinite scroller for react

Latest version **1.0.9** (published 2019-12-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scroll-to-fetch
pnpm add react-scroll-to-fetch
yarn add react-scroll-to-fetch
bun add react-scroll-to-fetch
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2019-12-23 |
| First published | 2019-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 544.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | xynes |
| Maintainers | xynes |
| Keywords | React, Scroller, scroll-to-fetch, infinite, infinite-scroller |

## Links

- npm: https://www.npmjs.com/package/react-scroll-to-fetch
- Repository: https://github.com/xynes-git/react-scroll-to-fetch
- Homepage: https://github.com/xynes-git/react-scroll-to-fetch#readme
- Issues: https://github.com/xynes-git/react-scroll-to-fetch/issues
- npm.io page: https://npm.io/package/react-scroll-to-fetch

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2019-12-23
- 1.0.8 — 2019-05-26
- 1.0.7 — 2019-05-26
- 1.0.6 — 2019-05-06
- 1.0.5 — 2019-04-22
- 1.0.4 — 2019-04-22
- 1.0.3 — 2019-04-22
- 1.0.2 — 2019-04-21
- 1.0.1 — 2019-04-19
- 1.0.0 — 2019-04-19

## README

# 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](https://img.shields.io/npm/v/react-scroll-to-fetch.svg)](https://www.npmjs.com/package/react-scroll-to-fetch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
## [Demo](https://xynes-hub.github.io/react-scroll-to-fetch/)
## Install

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

## Usage
### For Window Scroll
```jsx
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
```js
_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`

```js
_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](#manually-controll-the-page-number) 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.
```jsx
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](https://xynes.com)

---
_Source: https://npm.io/package/react-scroll-to-fetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._