sly-rc-paginator

Installation

$ npm install sly-rc-paginator --save

This paginator component assumes that you have styles for a paginator with the following structure

<ul>
    <li>
	    <a></a>
    </li>
</ul>

Also the paginator truncates the list pages to just 10.

Usage

import  React, {  Component  }  from  "react";

import  Paginator  from  "sly-rc-paginator";

class  App  extends  Component  {

    constructor()  {
	    super();
	    this.state  =  {
			meta:  { // demo meta data from API
			    totalItems:  100,
			    currentPage:  1,
				itemsPerPage:  5
			}
		};
	}
    onPageChange(currentPage)  {
	  this.setState(prevSate => {
	    return {
		  posts: json, // do stuff with json
		     meta: { // update meta data
					...prevSate.meta,
					currentPage
				}
	    };
	  });
    }
    render()  {
	    const  pagintorOptions  =  {
		    ulClassName:  "pagination",
		    liClassName:  "page-item",
		    activeClassName:  "active",
		    disabledClassName:  "disabled"
	    };
    return  (
	    <div  className="App">
		    {/*Show posts*/}
		    <Paginator
			    meta={this.state.meta}
			    options={pagintorOptions}
			    onPageChange={this.onPageChange.bind(this)}
		    />
	    </div>
	   );
    }
}
export  default  App;

Props

name	type	required	description
meta	object	YES	meta data that with the following keys totalItems, currentPage , itemsPerPage
meta.totalItems	number	YES	total number of rows to be paginated
meta.currentPage	number	YES	current page being viewed
meta.itemsPerPage	number	YES	number of items per page
options	object	YES	the paginator's options with the following keys ulClassName, liClassName, activeClassName, disabledClassName
options.ulClassName	string	YES	class name for the ul tag
options.liClassName	string	YES	class name for the li tag
options.activeClassName	string	YES	class name for the current page to be applied to the li tag
options.disabledClassName	string	YES	class name for the disabled links to be applied to the li tag
options.anchorClassName	string	NO	class name for the a tags
onPageChange	function	YES	the function that gets called when a page is clicked. It returns the currentPage as a number
firstComponent	component or string	NO	custom component for the link to the first page e.g "<<"
lastComponent	component or string	NO	custom component for the link to the last page e.g ">>"
prevComponent	component or string	NO	custom component for the link to the previous page e.g "<"
nextComponent	component or string	NO	custom component for the link to the next page e.g ">"
showFirst	boolean	NO	condition to show link to first page
showLast	boolean	NO	condition to show link to last page