react-pagify - Simple pagination for React

react-pagify provides a simple interface for pagination Consider the usage example below.

Usage

var Paginator = require('react-pagify');

require('react-pagify/style.css');


module.exports = React.createClass({
    getInitialState() {
        return {
            data: [
                ...
            ],
            pagination: {
                page: 0,
                perPage: 5
            },
        };
    },

    render() {
    var data = this.state.data || [];
    var pagination = this.state.pagination || {};
    var paginated = Paginator.paginate(data, pagination);

    return <article>
        <div className='per-page-container'>
            <span>Per page</span>
            <input
                type='text'
                defaultValue={pagination.perPage}
                onChange={this.onPerPage}>
            </input>
        </div>

        <Paginator
            page={paginated.page}
            pages={paginated.amount}
            beginPages={3}
            endPages={3}
            onSelect={this.onSelect}>
        </Paginator>

        <div className='data'>
            ...
        </div>
    </article>;
    },

    onSelect(page) {
        var pagination = this.state.pagination || {};

        pagination.page = page;

        this.setState({
            pagination: pagination
        });
    },

    onPerPage(e) {
        var pagination = this.state.pagination || {};

        pagination.perPage = parseInt(event.target.value, 10);

        this.setState({
            pagination: pagination
        });
    },
});

License

react-pagify is available under MIT. See LICENSE for more details.