# react-paginatr

> Easy pagination for react applications

Latest version **0.1.6** (published 2015-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-paginatr
pnpm add react-paginatr
yarn add react-paginatr
bun add react-paginatr
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2015-06-23 |
| First published | 2015-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Simon Auer |
| Maintainers | simonerich |
| Keywords | reactjs, react, paginate, pagination, pages, marty, martyjs |

## Links

- npm: https://www.npmjs.com/package/react-paginatr
- Repository: https://github.com/SimonErich/react-paginatr
- Issues: https://github.com/SimonErich/react-paginatr
- npm.io page: https://npm.io/package/react-paginatr

## Dependencies (1)

- [react](https://npm.io/package/react.md) *

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2015-06-23
- 0.1.5 — 2015-06-23
- 0.1.4 — 2015-05-27
- 0.1.3 — 2015-05-25
- 0.1.2 — 2015-05-24
- 0.1.1 — 2015-05-24
- 0.1.0 — 2015-05-24

## README

# 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:

```console
$ npm install react-paginatr
```


## Usage:

require it in files to use and define Mixin and Component:
```javascript
    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:

```javascript
    ...
    mixins: [PaginatrMixin],
    ...
```


use the paginate method:
```javascript
   var paginatedResults = this.paginate(data, perPage, _page);
```


that's what it could look like:

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


#### paginate method
```javascript
   this.paginate(data, perPage, _page)
```
     
     
###### array `data`
An array with items to paginate.

```javascript
 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:

```javascript
    ...
    
    render: function() {
        ...
          <PaginatrComponent 
                  page={this.state._page}          /* 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="pagination"      /* 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. */
          />
        ... 
     },
     
     ...
```



###### minimal component attributes

to make the component work you need at least those three attributes:

```javascript
    ...
    
    render: function() {
        ...
          <PaginatrComponent
                  page={this.state._page}
                  pagesTotal={10}
                  onPageSelect={this.onPageSelect}
          />
        ... 
     },
     
     ...
```






### Full example

here is a full working example of a paginated component

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

var Mycomponent = React.createClass({


   mixins: [PaginatrMixin],

   resultsPerPage: 2,

   render: function() {


                  var dataArr = [
                                    { id: 1, name: 'Pete' },
                                    { id: 2, name: 'Miriam' },
                                    { id: 3, name: 'Heinz' },
                                    { id: 4, name: 'Brunhilde' }
                                ];
                  var pagesTotal = (dataArr.length / this.resultsPerPage);

                 // paginate the full set of results in this.props.results
                  var paginatedResults = this.paginate(dataArr,                     // the data array
                                                       this.resultsPerPage,         // number of results per page
                                                       this.state._page);           // (optional) the current page (only if you want to override current page)


                 // map results
                  var Results = paginatedResults.map(function(result)
                            {
                                return (
                                   <div key={'key-' + result.id}>{result.name}</div>
                                );
                            });

                 // display it
                  return (
                     <div className="text-center">
                        <h1>Paginated</h1>
                        {Results}
                        <PaginatrComponent
                                    page={this.state._page}
                                    pagesTotal={pagesTotal}
                                    pageRangeDisplayed={1}
                                    activePageRangeDisplayed={2}
                                    prevLabel="«"
                                    nextLabel="»"
                                    breakLabel="...     "
                                    containerClass="pagination"
                                    onPageSelect={this.onPageSelect}
                            />
                     </div>
                  );

              }
});

export default Mycomponent;
```




### 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:

```javascript
    ...
    
    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
           />
        ... 
     },
     
     ...
```

---
_Source: https://npm.io/package/react-paginatr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._