react-pager

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.

Contributors

• tko