react_paginator

Bootstrap theme

Materialize theme

Custom materialize theme

React-Paginator is a react component to create a great and easy to use pagination system. You can customize it to adapt to your style

Usage

Three steps to start with react_paginator ;)

Install

npm i --save react_paginator

Import

import Paginator from 'react_paginator'

Add to DOM

<Paginator>
  // Elements on what you want to paginate
</Paginator>

Example with MaterializeCSS

<Paginator 
  prevIcon={<i className="material-icons">chevron_left</i>} 
  nextIcon={<i className="material-icons">chevron_right</i>}
  liClass="waves-effect">
 
  // Elements...
 
</Paginator>

Props

Name	Type	Description	Default Value
perPage	Integer	Number of elements you want to show on each page	1
bsClass	String	Base class of pagination system	pagination
prevIcon	Node	Previous page icon	null
nextIcon	Node	Next page icon	null
pageClass	String	Li element class	null
pageNextClass	String	Next (li) element class	null
pagePrevClass	String	Previous (li) element class	null
blankClass	String	[...] element class	null
showOnly	Integer	Number of pages to show	5
firstPageLabel	Node	Go to first page element	null
lastPageLabel	Node	Go to last page element	null
showPage	Integer	Page to show	1
onPageChanged	Function	Event triggered when page change	null