react-pagination

Simple yet configurable react pagination component.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-pagination
701.0.07 years ago8 years agoMinified + gzip package size for react-pagination in KB

Readme

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 number
  • ``numPages`` The total number of pages
  • ``num`` The number of pages to display

Returns an array of pages (numbers).
Examples:
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]

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.render(
  <Pagination initialPage={1} total={10} onPageChange={(page) => 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:
<ul class="pagination">
  <li class="pagination__page pagination__page--first">First page</li>
  <li class="pagination__page pagination__page--prev">First page</li>
  <li class="pagination__page pagination__page--selected">1</li>
  <li class="pagination__page">2</li>
  <li class="pagination__page">3</li>
  <li class="pagination__page">4</li>
  <li class="pagination__page">5</li>
  <li class="pagination__page pagination__page--next">Next page</li>
  <li class="pagination__page pagination__page--last">First page</li>
</ul>

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