React-paginator-box NPM

react-paginator-box

Page pagination component on Reactjs (Demo)

Browsers support

Chrome
Opera
Firefox
Safary >= 5.1.3
IE >= 9

Installation

 npm install react-paginator-box

How to use him?

 import React from 'react';
 import PaginationBox from 'react-paginator-box';

 var options = {
     items: 150,
     startPage: function () {
         var loc = window.location.href, search = loc ? loc.split('=') : 0;
         return search[1] ? search[1] : 1;
     },
     limit: 10,
     reload: false,
     selectHandler: function (p) {
         var start = "", loc = window.location.href.split("?");
         start = loc[0];
         var href = start + p.hrefPrefix + p.realPage;
         history.pushState(null, null, href);
     }
 };


 class App extends React.Component {
     constructor() {
         super();
         this.state = {
             items: 0
         }
     }

     _selectPage(pag) {
         var start = "", loc = window.location.href.split("?");
         start = loc[0];
         var href = start + pag.hrefPrefix + pag.realPage;
         history.pushState(null, null, href);
     }

     componentDidMount() {
         this.setState({items: 300});
     }


     _startPage() {
         var loc = window.location.href, search = loc ? loc.split('=') : 0;
         return search[1] ? search[1] : 1;
     }

     render() {
         return (
             <div className="appWrap">
                 <PaginationBox options={options} />
                 <PaginationBox items={this.state.items} />
                 <PaginationBox selectHandler={this._selectPage.bind(this)} items="200" display="5" startPage={this._startPage.bind(this)} />
             </div>
         );
     }
 }

 React.render(<App />, document.querySelector('#paginatorBox'));

Component parameters

items - The total number of elements (default - 100),
reload - reload page when user click on page link (default - false),
hrefPrefix - string used to build the href attribute, added before the page number (default - "?page="),
hrefParams - used to build the href attribute, added after the page number. (default - " "),
display - how many page numbers should be visible while navigation (default - 5),
limit - how many elements should be on one page (default - 10),
startPage - the start page number (default - 1), may be function,
end - how many page numbers should be visible at the beginning/ending of the pagination. (default - 2),
angularLink - show "prev","next" links (default - true),
edgeLinks - show "first", "last" links (default - true),
nextText - title at "next" link (default - "Next"),
prevText - title at "prev" link (default - "Prev"),
firstText - title at "first" link (default - "Start"),
lastText - title at "last" link (default - "End")