paginorm
A ReactJS dumb component to render a pagination.
A fork of Sergey Vayser's component named react-js-pagination.
The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.
Installation
Install paginorm
with npm:
$ npm install paginorm
Usage
Very easy to use. Just provide props with total amount of things that you want to display on the page.
;;;; { super; thisstate = activePage: 15 ; thishandlePageChange = ::this_handlePageChange; } { console; this; } { return <div> <Pagination activePage=thisstateactivePage itemsCountPerPage=10 totalItemsCount=450 pageRangeDisplayed=5 onChange=thishandlePageChange /> </div> ; } ReactDOM;
Params
Name | Type | Default | Description |
---|---|---|---|
totalItemsCount |
Number | Total count of items which you are going to display | |
onChange |
Function | Page change handler. Receive pageNumber as arg | |
acivePage |
Number | 1 |
Active page |
itemsCountPerPage |
Number | 10 |
Count of items per page |
pageRangeDisplayed |
Number | 5 |
Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages) |
firstPageText |
String / ReactElement | « |
Text of first page navigation button or whole element |
lastPageText |
String / ReactElement | » |
Text of last page navigation button or whole element |
prevPageText |
String / ReactElement | ⟨ |
Text of prev page navigation button or whole element |
nextPageText |
String / ReactElement | ⟩ |
Text of next page navigation button or whole element |
className |
String | "pagination" | ClassName for the pagination ul |
firstPageClassName |
String | ClassName for the first page link | |
lastPageClassName |
String | ClassName for the last page link | |
prevPageClassName |
String | ClassName for the previous page link | |
nextPageClassName |
String | ClassName for the next page link | |
allItemsClassName |
String | ClassName for the all pagination links | |
activeClassName |
String | ClassName for the active page |