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).
Install react-paginatr with npm:
$ npm install react-paginatrrequire it in files to use and define Mixin and Component:
var Paginatr = require('react-paginatr'),
PaginatrMixin = Paginatr.Mixin,
PaginatrComponent = Paginatr.Component;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],
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>
);
},
...
}); this.paginate(data, perPage, _page)An array with items to paginate.
var data = [
{ id: 1, name: 'Pete' },
{ id: 1, name: 'Miriam' },
{ id: 1, name: 'Heinz' },
{ id: 1, name: 'Brunhilde' }
];the number of items per page
current page number. If not set it will use this.state._page. (only needs to be set in special situations)
displaying the pagination box is quite easy. Just drop the pagination component in there:
...
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. */
/>
...
},
...to make the component work you need at least those three attributes:
...
render: function() {
...
<PaginatrComponent
page={this.state._page}
pagesTotal={10}
onPageSelect={this.onPageSelect}
/>
...
},
...here is a full working example of a paginated component
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 = Math.ceil(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;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
/>
...
},
...