package.json

{
  "name": "react-paginatr",
  "description": "Easy pagination for react applications",
  "version": "0.1.6",
  "main": "./index.js",
  "standalone": "react-paginatr",
  "license": "MIT",
  "author": {
    "name": "Simon Auer"
  },
  "repository": {
    "url": "https://github.com/SimonErich/react-paginatr"
  },
  "bugs": {
    "url": "https://github.com/SimonErich/react-paginatr"
  },
  "dependencies": {
    "react": "*"
  },
  "keywords": [
    "reactjs",
    "react",
    "paginate",
    "pagination",
    "pages",
    "marty",
    "martyjs"
  ],
  "readme": "# React Paginatr\n\n**Easy pagination mixin and component for React.**\n\nWill add easy pagination with help of Array.slice function to display paginated lists.\nIncludes a react mixin to easily slice the results and a pagination view component (uses a simple list by default - compatible with bootstrap).\n\n\n## Installation:\n\nInstall react-paginatr with npm:\n\n```console\n$ npm install react-paginatr\n```\n\n\n## Usage:\n\nrequire it in files to use and define Mixin and Component:\n```javascript\n    var Paginatr = require('react-paginatr'),\n        PaginatrMixin = Paginatr.Mixin,\n        PaginatrComponent = Paginatr.Component;\n```\n\n\n### Paginating data:\n\nuse the paginate function in the mixin to get the array part for this page.\nthis will use the *_page* state attribute as current page by default\n\nadd the mixin:\n\n```javascript\n    ...\n    mixins: [PaginatrMixin],\n    ...\n```\n\n\nuse the paginate method:\n```javascript\n   var paginatedResults = this.paginate(data, perPage, _page);\n```\n\n\nthat's what it could look like:\n\n```javascript\n    \n    module.exports = React.createClass({\n    \n          ...\n          \n          mixins: [PaginatrMixin],\n          \n          ...\n          \n          render: function() {\n          \n              // paginate the full set of results in this.props.results\n               var paginatedResults = this.paginate(this.props.results);\n              \n              // map results\n               var Results = paginatedResults.map(function(result)\n                         {\n                             return (\n                                <ResultItem key={'key-'+ result.id} result={result} />\n                             );\n                         }); \n                         \n              // display it\n               return (\n                  <div>\n                     {Results}\n                  </div>\n               );\n                      \n           },\n           \n           ...\n     \n     });\n```\n\n\n#### paginate method\n```javascript\n   this.paginate(data, perPage, _page)\n```\n     \n     \n###### array `data`\nAn array with items to paginate.\n\n```javascript\n var data = [\n              { id: 1, name: 'Pete' },\n              { id: 1, name: 'Miriam' },\n              { id: 1, name: 'Heinz' },\n              { id: 1, name: 'Brunhilde' }\n            ];\n```\n\n\n###### integer `perPage` (default: 12)\nthe number of items per page\n\n\n###### integer `_page` (optional | defaults to: this.state._page)\ncurrent page number. If not set it will use this.state._page. (only needs to be set in special situations)\n\n\n\n\n### Pagination Component:\n\ndisplaying the pagination box is quite easy. Just drop the pagination component in there:\n\n```javascript\n    ...\n    \n    render: function() {\n        ...\n          <PaginatrComponent \n                  page={2}                         // int: current page number - required\n                  pagesTotal=[10}                  // int: number of total pages - required\n                  pageRangeDisplayed={1}           // int: how much around start and end should be displayed by default (default: 1)\n                  activePageRangeDisplayed={2}     // int: how much around active page should be displayed by default (default: 2)\n                  prevLabel=\"«\"                    // string: label for previous entry - false to disable previous button (default: \"Previous\")\n                  nextLabel=\"»\"                    // string: label for next entry - false to disable next button (default: \"Next\")\n                  breakLabel=\"...     \"            // string: label for breaks if there are too many pages to display at once - false to disable breaks (default: \"...\")\n                  containerClass=\"paginator\"       // string: label for breaks if there are too many pages to display at once - false to disable breaks (default: \"...\")\n                  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.\n          />\n        ... \n     },\n     \n     ...\n```\n\n\n\n\n\n\n### More Customization:\n\n\n#### use different method on page change\n\nif 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.\n\nexample:\n\n```javascript\n    ...\n    \n    onPageSelectCustom: function(_page, clickEvent) {\n      \n       // do here whatever you need to do\n        console.log('the page: '+ _page);\n       \n       // the following is what we do in the onPageSelect method in mixin (surprise: no big magic there)\n        this.setState({ _page: _page });\n      \n    },\n    \n    render: function() {\n        ...\n          <PaginatrComponent \n                  page={2}\n                  pagesTotal=[10}\n                  onPageSelect={this.onPageSelectCustom} // just use your function here\n           />\n        ... \n     },\n     \n     ...\n```\n     \n \n",
  "readmeFilename": "README.md",
  "gitHead": "ee0f14fc602ee81d5fd1abeca5429e15de0a5d0b",
  "homepage": "https://github.com/SimonErich/react-paginatr",
  "_id": "react-paginatr@0.1.4",
  "scripts": {},
  "_shasum": "6c275ddbbe2568e74efa5cb2e15601cd743f66c3",
  "_from": "react-paginatr@"
}