tn-pagination

pagination

A SEO friendly pagination component for React.

Install

Via NPM

npm install tn-pagination

Usage

import React from 'react';
import Pagination from 'tn-pagination';
 
class MyComponent extends React.Component {
  componentDidMount() {
    // fetch data for the first time render.
  }
 
  componentWillReceiveProps(nextProps) {
    // fetch data when click the pagination.
  }
 
  genUrl = (page) => `/page/${page}`;
 
  render() {
    return (
      <div>
        <h1>Item list</h1>
        ... //list of items
        <Pagination
          pageCount={15}
          pageRangeDisplayed={5}
          page={1}
          genUrl={this.genUrl}
        />
      </div>
    );
  }
}

Props

List of props that can pass into the components.

Props	Type	Required	Default	Description
pageCount	Integer	true	-	Number of total Pages
pageRangeDisplayed	Integer	true	-	Range that pagination display
genUrl	Function	true	-	Function for generate url to attach in the pagination link
page	Integer	false	1	Number of current page
firstLabel	String	false	'\xAB'	Label for the first page button
previousLabel	String	false	'\u2039'	Label for the previous page button
nextLabel	String	false	'\u203A'	Label for the next page button
lastLabel	String	false	'\xBB'	Label for the last page button
containerClassName	String	false	'pagination'	Classname of the pagination component
activeClassName	String	false	'active'	Classname of the current page button
pageClassName	String	false	'page'	Classname of the button excluded first/previous/next/last button
pageLinkClassName	String	false	'page-link'	Classname of the link in the button excluded first/previous/next/last button
firstClassName	String	false	'first'	Classname of the first button
firstLinkClassName	String	false	'first-link'	Classname of the link in the first button
previousClassName	String	false	'previous'	Classname of the previous button
previousLinkClassName	String	false	'previous-link'	Classname of the link in the previous button
nextClassName	String	false	'next'	Classname of the next button
nextLinkClassName	String	false	'next-link'	Classname of the link in the next button
lastClassName	String	false	'last'	Classname of the last button
lastLinkClassName	String	false	'last-link'	Classname of the link in the last button