REACO-PAGINATION

A ReactJS component that creates a pagination.

Reaco-Pagination is written over AdeleD/react-paginate.

Installation

Using npm:

$ npm install --save reaco-pagination

Code example

import React, { Component } from 'react';
import Pagination from 'reaco-pagination';
 
// finally the component to be render
<Pagination
      forcePage={0}
      total={150} 
      size={10} 
      dataSize={10}
      handlePageChange={this.onPageChange}
      handlePageOptionChange={this.onPageOptionChange} />

See the App.js for complete code example.

Props

Name	Type	Description
total	Number	Required. The total number of data across the pages.
size	Number	Required. The total number of maximum data per page i.e per page count.
dataSize	Number	Required. The least number of rows per page i.e there may be less items on last page in compare to maximum count per page.
forcePage	Number	Optional. This is current page index.
handlePageChange	Function	Optional. This is the callback function hits on page number's click.
handlePageOptionChange	Function	Optional. This is the callback function hits on page count option's click.
pageOptions	Array	Optional. This is list of different page counts. ex: [10, 25, 50, 100]
pageSummaryText	String	Optional. This is text string of pagination summary. It must contain these words i.e '#first_count#, #last_count#, #total_counts#' to show 'inital count of page, last count of page and total counts of all pages' respectively. ex: 'Showing #first_count# to #last_count# of #total_counts# entries'

See the full Documentation of react-paginate here.