Stateless Pager component

Getting started

browserify

var Pager = require( 'react-pager' );

Global scripts

dist/pager.min.js is prebuilded for using in global <script> tag. (It's used in JSFiddle demo).

Usage

var Pager = require( 'react-pager' );
var PagerDemo = React.createClass({
getInitialState: function () {
return {
total: 11,
current: 7,
visiblePages: 3
};
},
handlePageChanged: function ( newPage ) {
this.setState({ current : newPage });
},
render: function() {
return (<Pager total={this.state.total}
current={this.state.current}
{/* Optional */}
titles={{
first: 'First',
prev: '\u00AB',
prevSet: '...',
nextSet: '...',
next: '\u00BB',
last: 'Last'
}}
visiblePages={this.state.visiblePages}
onPageChanged={this.handlePageChanged}/>);
}
});
React.render(<PagerDemo />, document.body);

How it looks like*

First | Prev | ... | 6 | 7 | 8 | 9 | ... | Next | Last

* Bootstrap 3.0 is required by default, but you can replace it with your own css.

Demo

gulp demo -p 8003 

or

./node_modules/.bin/gulp demo -p 8003

JSFiddle

Tests

npm test

Changelog

v1.1.1

• Updated to React 0.13.
• Updated local demo.

v1.1.0

• Added titles property. See demo.
• Improved building script.

v1.0.6

• Fixed <li class="undefined" .. in "more" and "less" buttons.
• Added a few unit-tests.