react-pagination
React pagination is a very simple yet configurable pagination component built with React.
API
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
pageRange
Returns an array with the range of pages to be displayed according to the params passed. Params:
selected
The selected page numbernumPages
The total number of pagesnum
The number of pages to display
Returns an array of pages (numbers).
Examples:
;// => [1, 2, 3, 4, 5] ;// => [1, 2, 3, 4, 5] ;// => [1, 2, 3, 4, 5] ;// => [2, 3, 4, 5, 6] ;// => [3, 4, 5, 6, 7] ;// => [6, 7, 8, 9, 10] ;// => [7, 8, 9, 10] ;// => [8, 9, 10]
Pagination
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:
React /> documentbody);
The pagination component is completely CSS agnostic. It just renders the HTML and comes with absolutely no style.
It renders something like:
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 containerpagination__page
: li childrenpagination__page--selected
: selected pagepagination__page--first
: first pagepagination__page--prev
: prev pagepagination__page--next
: next pagepagination__page--last
: last page