Simple yet configurable react pagination component.
npm install react-paginationReact pagination is a very simple yet configurable pagination component built with React.
When included in the browser via ``react-pagination.min.js` everything is exposed on the `reactPagination` variable.
React pagination exposes two things:
* `pageRange`: a function that returns a range of pages given a number of parameters (discussed later)`
* Pagination`: the component itself
selected` The selected page number
* `numPages` The total number of pages
* `num` The number of pages to displayReturns an array of pages (numbers).
Examples:
`javascript
pageRange(1, 10, 5);
// => [1, 2, 3, 4, 5]pageRange(2, 10, 5);
// => [1, 2, 3, 4, 5]
pageRange(3, 10, 5);
// => [1, 2, 3, 4, 5]
pageRange(4, 10, 5);
// => [2, 3, 4, 5, 6]
pageRange(5, 10, 5);
// => [3, 4, 5, 6, 7]
pageRange(8, 10, 5);
// => [6, 7, 8, 9, 10]
pageRange(9, 10, 5);
// => [7, 8, 9, 10]
pageRange(10, 10, 5);
// => [8, 9, 10]
`$3
Pagination is the Pagination component itself, it can receive the following properties:
* onPageChange` {Function} Triggered when the user clicks on a page and the pages should be changed. Required.
* `total` {Number} Total number of pages. Required.
* `initialPage` {Number} Initially selected page. Default: 1.
* `pagesToDisplay` {Number} Number of pages to display. Default: 5.
* `firstPageText` {string} Text of the "First page" button. Can contain HTML. Default: First page.
* `prevPageText` {string} Text of the "Previous page" button. Can contain HTML. Default: Previous page.
* `nextPageText` {string} Text of the "Next page" button. Can contain HTML. Default: Next page.
* `lastPageText` {string} Text of the "Last page" button. Can contain HTML. Default: Last page.
* `showFirstLast` {boolean} Show "First page" and "Last page" buttons. Default: true.
* `showPrevNext` {boolean} Show "Previous page" and "Next page" buttons. Default: true.Example:
`javascript
React.render(
console.log('Selected page ' + page)}) />,
document.body
);
`The pagination component is completely CSS agnostic. It just renders the HTML and comes with absolutely no style.
It renders something like:
html
- First page
- First page
- 1
- 2
- 3
- 4
- 5
- Next page
- First page
`React-pagination uses BEM as the naming convention for the classes.
List of classes:
*
pagination`: ul container
* `pagination__page`: li children
* `pagination__page--selected`: selected page
* `pagination__page--first`: first page
* `pagination__page--prev`: prev page
* `pagination__page--next`: next page
* `pagination__page--last``: last page