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.