react-paginatr
Version:
Easy pagination for react applications
278 lines (184 loc) • 7.88 kB
Markdown
# 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
/>
...
},
...
```