React-recompose-pagination NPM

react-recompose-pagination ( Newest version 0.1.6 )

Fully customizable react pagination component

PROPS

Name	Type	Default value	Description
total	Number		REQUIRED - Total page count
currentPage	Number		REQUIRED - Current active page
onChange	Function		REQUIRED - Handler callback function
displayRange	Number	3	Number of page to display from left and right of current page
ContainerEl	String	'nav'	Element type for container
containerClass	String	'react-recompose-pagination'	Container class name
WrapperEl	String	'ul'	Element type for wrapper
wrapperClassName	String	'react-recompose-pagination__wrapper'	Wrapper class name
PageEl	String	'li'	Element type for page
pageClassName	String	'react-recompose-pagination__page'	Page class name
first	String or Element or Node	'First'	First button content
firstClassName	String	'react-recompose-pagination__first'	First button class name
renderFirst	Function	() => {}	Render props function for first button
last	String or Element or Node	'Last'	Last button content
firstClassName	String	'react-recompose-pagination__last'	Last button class name
renderFirst	Function	() => {}	Render props function for last button
prev	String or Element or Node	'\u00AB'	Prev button content
prevClassName	String	'react-recompose-pagination__prev'	Prev button class name
renderPrev	Function	() => {}	Render props function for prev button
next	String or Element or Node	'\u00BB'	Next button content
nextClassName	String	'react-recompose-pagination__next'	Next button class name
renderNext	Function	() => {}	Render props function for next button
prevSet	String or Element or Node	'...'	Prev set content
prevSetClassName	String	'react-recompose-pagination__prev-set'	Prev set class name
renderPrevSet	Function	() => {}	Render props function for prev set
nextSet	String or Element or Node	'...'	Next set content
nextSetClassName	String	'react-recompose-pagination__next-set'	Next set class name
renderNextSet	Function	() => {}	Render props function for next set
hideFirstAndLast	Boolean	false	Check render first and last button

DEMO

You can see the demo with example code HERE

Installation

By npm

npm install --save react-recompose-pagination

By Yarn

yarn add react-recompose-pagination

You can also use the standalone UMD build

<script src="https://unpkg.com/react-recompose-pagination@0.1.6/lib/react-recompose-pagination.js"></script>
<script src="https://unpkg.com/react-recompose-pagination@0.1.6/lib/react-recompose-pagination.min.js"></script>