module react-paginate
1. function react-paginate (props)
2. function react-paginate.propTypes.containerClassName ()
3. function react-paginate.propTypes.disableInitialCallback ()
4. function react-paginate.propTypes.hrefBuilder ()
5. function react-paginate.propTypes.initialPage ()
6. function react-paginate.propTypes.previousLabel ()
7. object react-paginate.defaultProps
8. object react-paginate.propTypes
module react-paginate.propTypes
module react-paginate.propTypes.containerClassName
1. function react-paginate.propTypes.containerClassName ()
2. function react-paginate.propTypes.containerClassName.isRequired ()
module react-paginate.propTypes.disableInitialCallback
1. function react-paginate.propTypes.disableInitialCallback ()
2. function react-paginate.propTypes.disableInitialCallback.isRequired ()
module react-paginate.propTypes.hrefBuilder
1. function react-paginate.propTypes.hrefBuilder ()
2. function react-paginate.propTypes.hrefBuilder.isRequired ()
module react-paginate.propTypes.initialPage
1. function react-paginate.propTypes.initialPage ()
2. function react-paginate.propTypes.initialPage.isRequired ()
module react-paginate.propTypes.previousLabel
1. function react-paginate.propTypes.previousLabel ()
2. function react-paginate.propTypes.previousLabel.isRequired ()

module react-paginate

function react-paginate (props)

description and source-code

function PaginationBoxView(props) {
  _classCallCheck(this, PaginationBoxView);

  var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(PaginationBoxView).call(this, props));

  _this.handlePreviousPage = function (evt) {
    evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
    if (_this.state.selected > 0) {
      _this.handlePageSelected(_this.state.selected - 1, evt);
    }
  };

  _this.handleNextPage = function (evt) {
    evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
    if (_this.state.selected < _this.props.pageCount - 1) {
      _this.handlePageSelected(_this.state.selected + 1, evt);
    }
  };

  _this.handlePageSelected = function (selected, evt) {
    evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;

    if (_this.state.selected === selected) return;

    _this.setState({ selected: selected });

    // Call the callback with the new selected item:
    _this.callCallback(selected);
  };

  _this.callCallback = function (selectedItem) {
    if (typeof _this.props.onPageChange !== "undefined" && typeof _this.props.onPageChange === "function") {
      _this.props.onPageChange({ selected: selectedItem });
    }
  };

  _this.pagination = function () {
    var items = {};

    if (_this.props.pageCount <= _this.props.pageRangeDisplayed) {

      for (var index = 0; index < _this.props.pageCount; index++) {
        items['key' + index] = _this.getPageElement(index);
      }
    } else {

      var leftSide = _this.props.pageRangeDisplayed / 2;
      var rightSide = _this.props.pageRangeDisplayed - leftSide;

      if (_this.state.selected > _this.props.pageCount - _this.props.pageRangeDisplayed / 2) {
        rightSide = _this.props.pageCount - _this.state.selected;
        leftSide = _this.props.pageRangeDisplayed - rightSide;
      } else if (_this.state.selected < _this.props.pageRangeDisplayed / 2) {
        leftSide = _this.state.selected;
        rightSide = _this.props.pageRangeDisplayed - leftSide;
      }

      var _index = void 0;
      var page = void 0;
      var breakView = void 0;

      for (_index = 0; _index < _this.props.pageCount; _index++) {

        page = _index + 1;

        var pageView = _this.getPageElement(_index);

        if (page <= _this.props.marginPagesDisplayed) {
          items['key' + _index] = pageView;
          continue;
        }

        if (page > _this.props.pageCount - _this.props.marginPagesDisplayed) {
          items['key' + _index] = pageView;
          continue;
        }

        if (_index >= _this.state.selected - leftSide && _index <= _this.state.selected + rightSide) {
          items['key' + _index] = pageView;
          continue;
        }

        var keys = Object.keys(items);
        var breakLabelKey = keys[keys.length - 1];
        var breakLabelValue = items[breakLabelKey];

        if (_this.props.breakLabel && breakLabelValue !== breakView) {
          breakView = _react2.default.createElement(_BreakView2.default, {
            breakLabel: _this.props.breakLabel,
            breakClassName: _this.props.breakClassName
          });

          items['key' + _index] = breakView;
        }
      }
    }

    return items;
  };

  _this.state = {
    selected: props.initialPage ? props.initialPage : props.forcePage ? props.forcePage : 0
  };
  return _this;
}

example usage
```
n/a
```

function react-paginate.propTypes.containerClassName ()

description and source-code

propTypes.containerClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.disableInitialCallback ()

description and source-code

propTypes.disableInitialCallback = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.hrefBuilder ()

description and source-code

propTypes.hrefBuilder = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.initialPage ()

description and source-code

propTypes.initialPage = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.previousLabel ()

description and source-code

propTypes.previousLabel = function () { [native code] }

example usage
```
n/a
```

module react-paginate.propTypes

function react-paginate.propTypes.activeClassName ()

description and source-code

activeClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.breakClassName ()

description and source-code

breakClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.breakLabel ()

description and source-code

breakLabel = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.containerClassName ()

description and source-code

containerClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.disableInitialCallback ()

description and source-code

disableInitialCallback = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.disabledClassName ()

description and source-code

disabledClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.forcePage ()

description and source-code

forcePage = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.hrefBuilder ()

description and source-code

hrefBuilder = function () { [native code] }

example usage

...
      this.setState({ selected: nextProps.forcePage });
    }
  }
}, {
  key: 'hrefBuilder',
  value: function hrefBuilder(pageIndex) {
    if (this.props.hrefBuilder && pageIndex !== this.state.selected && pageIndex >= 0 && pageIndex
 < this.props.pageCount) {
      return this.props.hrefBuilder(pageIndex + 1);
    }
  }
}, {
  key: 'getPageElement',
  value: function getPageElement(index) {
    return _react2.default.createElement(_PageView2.default, {
      onClick: this.handlePageSelected.bind(null, index),
...

function react-paginate.propTypes.initialPage ()

description and source-code

initialPage = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.marginPagesDisplayed ()

description and source-code

marginPagesDisplayed = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.nextClassName ()

description and source-code

nextClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.nextLabel ()

description and source-code

nextLabel = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.nextLinkClassName ()

description and source-code

nextLinkClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.onPageChange ()

description and source-code

onPageChange = function () { [native code] }

example usage

...

// Call the callback with the new selected item:
_this.callCallback(selected);
    };

    _this.callCallback = function (selectedItem) {
if (typeof _this.props.onPageChange !== "undefined" && typeof _this.props.onPageChange === "function"
;) {
  _this.props.onPageChange({ selected: selectedItem });
}
    };

    _this.pagination = function () {
var items = {};

if (_this.props.pageCount <= _this.props.pageRangeDisplayed) {
...

function react-paginate.propTypes.pageClassName ()

description and source-code

pageClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.pageCount ()

description and source-code

pageCount = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.pageLinkClassName ()

description and source-code

pageLinkClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.pageRangeDisplayed ()

description and source-code

pageRangeDisplayed = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.previousClassName ()

description and source-code

previousClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.previousLabel ()

description and source-code

previousLabel = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.previousLinkClassName ()

description and source-code

previousLinkClassName = function () { [native code] }

example usage
```
n/a
```

module react-paginate.propTypes.containerClassName

function react-paginate.propTypes.containerClassName ()

description and source-code

containerClassName = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.containerClassName.isRequired ()

description and source-code

isRequired = function () { [native code] }

example usage
```
n/a
```

module react-paginate.propTypes.disableInitialCallback

function react-paginate.propTypes.disableInitialCallback ()

description and source-code

disableInitialCallback = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.disableInitialCallback.isRequired ()

description and source-code

isRequired = function () { [native code] }

example usage
```
n/a
```

module react-paginate.propTypes.hrefBuilder

function react-paginate.propTypes.hrefBuilder ()

description and source-code

hrefBuilder = function () { [native code] }

example usage

...
      this.setState({ selected: nextProps.forcePage });
    }
  }
}, {
  key: 'hrefBuilder',
  value: function hrefBuilder(pageIndex) {
    if (this.props.hrefBuilder && pageIndex !== this.state.selected && pageIndex >= 0 && pageIndex
 < this.props.pageCount) {
      return this.props.hrefBuilder(pageIndex + 1);
    }
  }
}, {
  key: 'getPageElement',
  value: function getPageElement(index) {
    return _react2.default.createElement(_PageView2.default, {
      onClick: this.handlePageSelected.bind(null, index),
...

function react-paginate.propTypes.hrefBuilder.isRequired ()

description and source-code

isRequired = function () { [native code] }

example usage
```
n/a
```

module react-paginate.propTypes.initialPage

function react-paginate.propTypes.initialPage ()

description and source-code

initialPage = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.initialPage.isRequired ()

description and source-code

isRequired = function () { [native code] }

example usage
```
n/a
```

module react-paginate.propTypes.previousLabel

function react-paginate.propTypes.previousLabel ()

description and source-code

previousLabel = function () { [native code] }

example usage
```
n/a
```

function react-paginate.propTypes.previousLabel.isRequired ()

description and source-code

isRequired = function () { [native code] }

example usage
```
n/a
```

api documentation for react-paginate (v4.3.1)

A ReactJS component that creates a pagination.

table of contents