reaginate

React Pager

A ReactJS component to render a pagination.

Installation

npm install reaginate --save

Screenshot

Props

| Name | Type | Description | | --- | --- | --- | --- | | currentPage | Number | Required. The current page to display. | | totalPages | Number | Required. The total number of pages. | | onPageChange | Number | Required. A callback with the page number as an argument for when the page changes. | | onRefresh | Function | A function when the refresh button is clicked. If omitted, the button is not displayed. | | displayLabel | String | A label to display feedback for the user. i.e. Displaying 1 to 50 of 200 messages |

API

<Reaginate
    currentPage={ pager.currentPage }
    totalPages={ pager.totalPages }
    onPageChange={ this.onPageChange }
    onRefresh={ this.onRefresh }
    displayLabel={ `Displaying events 101 - 150 of 7765` }/>

Example usage

import React, {Component} from 'react';

import 'reaginate/src/reaginate.scss'
import Reaginate from 'reaginate';

class MessageInbox extends Component {

    constructor(props) {
        super(props);
        // Fetch data and then set state...
        this.state = {
            pager: {
                currentPage: 1,
                totalPages: 20
            }
        };
    }

    onPageChange(page) {
        const {totalPages} = this.state.pager;
        this.setState({
            pager: {
                currentPage: page,
                totalPages: totalPages
            }
        });
    }


    render() {
        const {pager} = this.state;
        return (
          <div>
              <Grid />
              <Reaginate
                  currentPage={ pager.currentPage }
                  totalPages={ pager.totalPages }
                  onPageChange={ this.onPageChange }
                  displayLabel={ `Displaying events 101 - 150 of 7765` }/>
          </div>
        );
    }
}