@fweb/react-pagination

react-pagination

react pagination component

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Pager from '../src/';

function onPageChange(page) {
  console.log(page);
}

ReactDOM.render(
  <div>
    <Pager pageCount={100} onPageChange={onPageChange} cls="my-class" />
    <Pager pageCount={100} onPageChange={onPageChange} cls="my-class" prevPage="Prev" nextPage="Next" />
    <Pager pageCount={100} onPageChange={onPageChange} visiblePageCount={12} cls="my-class" showFirstLastPage={true} />
    <Pager pageCount={100} onPageChange={onPageChange} visiblePageCount={15} currentPage={5} cls="my-class" />
  </div>,
  document.querySelector('#root')
);

Customization options

you must specify pageCount and onPageChange props , others are optional. see the code above from demo/index.js

Option Name	Description
pageCount	set page count for pagination
onPageChange	set the page change handler
currentPage	set the active page, by default it's the first page : 1
firstPage	set the first page button text
lastPage	set the last page button text, e.g last-text="Last Page" default is "Last"
prevPage	set the prev page button text
nextPage	set the next page button text
visiblePageCount	set the visible page button count. e.g. the pageCount is 100, and the currentPage is 50, it will only show page 45 to page 54 default value is 10
cls	add classname to the top div element, you can use it to customize the style
showFirstLastPage	whether to show the first page and last page button

Demo

1. npm install
2. npm start