React-js-paginator NPM

npm npm npm

React-js-paginator

Simple react JS paginator

Simple React JS Pagination component. Can be easily customized with CSS objects

alt text

How to thank me? Just click on ⭐️ button :)

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm i react-js-paginator

It is really easy to use, just:

Import Paginator in your react component.

import Paginator from 'react-js-paginator';

And then specify the page size, total elements and a callback function.

For example:

<Paginator
  pageSize={10}
  totalElements={64}
  onPageChangeCallback={(e) => {this.pageChange(e)}}
/>

Once the page has changed, will trigger the callback function and send back the current page.

Styles can be customized using pageBoxStyle and activePageBoxStyle props like:

pageBoxStyle={{
	border: 0, 
	color: 'black', 
	padding: 3, 
	fontSize: 16
}}

activePageBoxStyle={{
	fontWeight: 'bolder', 
	color: 'green', 
	backgroundColor: '#d7f7dc'
}}

Giving you as result:

alt text

Name	Type	Mandatory	Description
pageSize	int	Y	How many elements will compose a page
totalElements	int	Y	Total elements you have in store
onPageChangeCallback	function	Y	function to be triggered when a page change happens
pageBoxStyle	object	N	style object for each pagination box
activePageBoxStyle	object	N	style object the active page
maxPagesToDisplay	int	N	how many pages will be displayed at the same time in the paginator (default 6)
firstArrowAlwaysVisible	present	N	showAlways the first page arrow
lastArrowAlwaysVisible	present	N	showAlways the first page arrow
firstArrowSymbol	string	N	customize first page symbol (default <<)
lastArrowSymbol	string	N	customize last page symbol (default >>)