Natural Polyglot Machine

    react-pagination

    1.0.0 • Public • Published

    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

    Install

    npm i react-pagination

    DownloadsWeekly Downloads

    314

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • erizocosmico