1.1.0 • Published 9 years ago

react-simple-paginate v1.1.0

Weekly downloads
14
License
-
Repository
github
Last release
9 years ago

paginate

Simple and minnimal component for adding pagination links.

Demo & Examples

You can see the working example here - prakash23.github.io/react-simple-paginate

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Installation

The easiest way to use react-simple-paginate is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/react-simple-paginate.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-simple-paginate --save

Usage

The component generates links based on the total number of results, typical usage is like -

var Paginate = require('react-simple-paginate');

	<Paginate
      total="100"
      containerClassName="pages-list"
      currentPageClassName = "active-page"
      pageClassName = "page-link"
      handler={this.handler}
	/>

Following are the props supported -

PropDescription
totalTotal number of elements (number of page links generated are based on this value)
offsetoffset for currently shown elements, (current page is based on this value)
limitnumber of results shown in a page
handlercallback when any page link is clicked, the offset for that page is passed as a param to the callback
prevLabelLabel for previous Link
nextLabelLabel for next Link
containerClassNamecss class for the component root
pageClassNamecss class for the individual page links (also added to previous and next links.)
currentPageClassNamecss class for the current page link
centerPagesCountNumber of page links shown after the left marker
cornerPagesCountNumber of first and last pages shown.
leftMarkerLabel for indicating there are more pages on the left.
rightMarkerLabel for indicating there are more pages on the right.

Development (src, lib and the build process)

NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild lib, run npm run watch (this is useful if you are working with npm link).

License

PUT LICENSE HERE

Copyright (c) 2016 Prakash.

1.1.0

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago