npm package: @majioa/react-scroll-pagination
Description: A component for pagination with scrolling
Author: codingfishman
Latest version: 0.2.3

# react-scroll-pagination
![Travis](https://travis-ci.org/codingfishman/react-scroll-pagination.svg?branch=master)

A React component to help the page with scrolling pagination. It will execute the fetching function when the scrollbal is close to the bottom in less than 30 pixers.

It will also show the paging status when scrolling, when it's **scrolling down and scrolling up**, include the *current page* and *total pages*, this is done by calculating the `document height` and `one page height`.

The pagination element will be displayed on the bottom of the window, with a bottom of `15px` in `fixed` position. I should set up a demo page, I know ;(.

ANY ISSUE YOU FOUND, PLEASE HELP LET ME KNOW :)


## DEMO
A simple demo at [jsFiddle](https://jsfiddle.net/nickday/f0tg0wd7/10/)

<script async src="//jsfiddle.net/nickday/f0tg0wd7/10/embed/js,html,result/"></script>

## Install
NPM

```nodejs
npm install --save react-scroll-pagination
```

## Basic Usage
The code below demonstarted the basic use case with the component, we need to specify the `fetchFunc` at least so it can help to fetch the next page.

```js
import ReactScrollPagination from 'react-scroll-pagination'

// in the render function

render: function () {
  return (
    // some list item elements
    <ReactScrollPagination
      fetchFunc={theFuncToFetchNextPage}
    />
  )
}

```


## Configurable Props

### fetchFunc
`REQUIRED`

The function to be excuted while the scroll bar event is triggered, usally the one to fetch next page data.

**CAUTION:**
 As the function will be called everytime the scroll bar is close to bottom, it will be executed even when previous page has not been rendered yet, we need to handle and prevent the case inside the fetchFunc.

```js
// by something like this
function fetchFunc () {
  if (isRequesting) {
    // do nothing
    return
  }

  // otherwise, do the normal request
}
```

### totalPages
`OPTIONAL`
> If we just want to fetch the next page data without displaying the page number, do not configure it.

We have to tell the component how many pages we totally have when we want to display the pages, so it can calculate the page position.

### total
`OPTIONAL`
> If we just want to fetch the next page data without displaying the page number, do not configure it.

We have to tell the component how many records we totally have to render in full list when we want to display the pages, so we can calculate numbers in a slug.

It must be used along with the **loadedTotal** parameter.

### loadedTotal
`OPTIONAL`
> If we just want to fetch the next page data without displaying the page number, do not configure it.

We have to tell the component how many records are loaded into a container, so we can calculate numbers in a slug.

It must be used along with the **total** parameter.

### paginationShowTime
`OPTIONAL`

`DEFAULT: 2000`

Specify how long shall the pagination element displays.

### excludeElement
`OPTIONAL`

`DEFAULT: null`

Usage:`excludeElement: '#nav-bar'`

> While the component is based on the **HEIGHT** of the document, it's quite sensible for the precision of height. And there are cases that the list is just part of the page, in most situations we have such as *Navbar* on the page as well, and we need to deduct it from calculation.

This props speicfy the *selector* of the element which should be deduct from height calculation. The *selector* could be anything compatible with jQuery, as we use jQuery here. *Currently, only one element selector is supported.*

### excludeHeight
`OPTIONAL`

`DEFAULT: 0`

Usage: `excludeHeight: {50}`, or `execludeHeight: '50px'`

Similar to *excludeElement*, only this props specify the height directly. If both *excludeElement* and *excludeHeight* are specified, only the *excludeHeight* will work.


### triggerAt
`OPTIONAL`

DEFAULT: 30(px)

Specify at which a distance when the scroll bar is close to the bottom shall the `fetchFunc` be called. It's usefull when we want to load the next page smoothly so the user can scroll down without a halt.

### outterDivStyle
`OPTIONAL`

DEFAULT:

```js
{
  position: 'fixed',
  bottom: '15px',
  left: 0,
  right: 0,
  textAlign: 'center'
}
```

Specify the style of outter element, who is actually the outter wrapper of inner pagination elements

### innerDivStyle
DEFAULT:

```js
{
  display: 'inline-block',
  background: 'rgba(6, 6, 6, 0.54)',
  borderRadius: '5px',
  padding: '3px 15px',
  minWidth: '80px',
  color: '#fff',
  textAlign: 'center',
  margin: '0 auto',
  opacity: 1,
  WebkitTransition: 'opacity 0.8s',
  MozTransition: 'opacity 0.8s',
  OTransition: 'opacity 0.8s',
  transition: 'opacity 0.8s'
}
```

Speicfy the style of inner element, who is actually the real DIV of the pagination details

## Full Usage

```js
render: function () {
  return (
    // some list item elements
    <ReactScrollPagination
      fetchFunc={theFuncToFetchNextPage}
      totalPages={totalPagesOfTheList}
      total={totalRecordsInTheList}
      loadedTotal={totalLoadedRecordsInTheList}
      paginationShowTime=3000
      excludeElement='#nav-bar'
      excludeHeight=50
      triggerAt=300
      outterDivStyle={}
      innerDivStyle={}
    />
  )
```