0.1.6 • Published 10 years ago

react-paginatr v0.1.6

Weekly downloads
4
License
MIT
Repository
github
Last release
10 years ago

React Paginatr

Easy pagination mixin and component for React.

Will add easy pagination with help of Array.slice function to display paginated lists. Includes a react mixin to easily slice the results and a pagination view component (uses a simple list by default - compatible with bootstrap).

Installation:

Install react-paginatr with npm:

$ npm install react-paginatr

Usage:

require it in files to use and define Mixin and Component:

    var Paginatr = require('react-paginatr'),
        PaginatrMixin = Paginatr.Mixin,
        PaginatrComponent = Paginatr.Component;

Paginating data:

use the paginate function in the mixin to get the array part for this page. this will use the _page state attribute as current page by default

add the mixin:

    ...
    mixins: [PaginatrMixin],
    ...

use the paginate method:

   var paginatedResults = this.paginate(data, perPage, _page);

that's what it could look like:

    
    module.exports = React.createClass({
    
          ...
          
          mixins: [PaginatrMixin],
          
          ...
          
          render: function() {
          
              // paginate the full set of results in this.props.results
               var paginatedResults = this.paginate(this.props.results);
              
              // map results
               var Results = paginatedResults.map(function(result)
                         {
                             return (
                                <ResultItem key={'key-'+ result.id} result={result} />
                             );
                         }); 
                         
              // display it
               return (
                  <div>
                     {Results}
                  </div>
               );
                      
           },
           
           ...
     
     });

paginate method

   this.paginate(data, perPage, _page)
array data

An array with items to paginate.

 var data = [
              { id: 1, name: 'Pete' },
              { id: 1, name: 'Miriam' },
              { id: 1, name: 'Heinz' },
              { id: 1, name: 'Brunhilde' }
            ];
integer perPage (default: 12)

the number of items per page

integer _page (optional | defaults to: this.state._page)

current page number. If not set it will use this.state._page. (only needs to be set in special situations)

Pagination Component:

displaying the pagination box is quite easy. Just drop the pagination component in there:

    ...
    
    render: function() {
        ...
          <PaginatrComponent 
                  page={2}                         // int: current page number - required
                  pagesTotal=[10}                  // int: number of total pages - required
                  pageRangeDisplayed={1}           // int: how much around start and end should be displayed by default (default: 1)
                  activePageRangeDisplayed={2}     // int: how much around active page should be displayed by default (default: 2)
                  prevLabel="«"                    // string: label for previous entry - false to disable previous button (default: "Previous")
                  nextLabel="»"                    // string: label for next entry - false to disable next button (default: "Next")
                  breakLabel="...     "            // string: label for breaks if there are too many pages to display at once - false to disable breaks (default: "...")
                  containerClass="paginator"       // string: label for breaks if there are too many pages to display at once - false to disable breaks (default: "...")
                  onPageSelect={this.onPageSelect} // func: the function to change the page number. the mixin already adds a simple onPageSelect method. If you need more overwrite it.
          />
        ... 
     },
     
     ...

More Customization:

use different method on page change

if you want to use a different method on page (maybe to do something else), just create your own onPageSelect method (use a different name - to prevent duplicate method error) and assign that to your component.

example:

    ...
    
    onPageSelectCustom: function(_page, clickEvent) {
      
       // do here whatever you need to do
        console.log('the page: '+ _page);
       
       // the following is what we do in the onPageSelect method in mixin (surprise: no big magic there)
        this.setState({ _page: _page });
      
    },
    
    render: function() {
        ...
          <PaginatrComponent 
                  page={2}
                  pagesTotal=[10}
                  onPageSelect={this.onPageSelectCustom} // just use your function here
           />
        ... 
     },
     
     ...
0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago