Skip to content
This repository has been archived by the owner. It is now read-only.
*DEPRECATED* React <Pager> component (stateless).
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
img
spec
src
.babelrc
.codeclimate.yml
.eslintignore
.eslintrc.json
.gitignore
.jshintrc
.travis.yml
Dockerfile
LICENSE
README.md
karma.conf.js
package.json
webpack.config.js
yarn.lock

README.md

DEPRECATED Stateless Pager component

Code Climate Build Status
NPM version

Deprecation notice

Now all my free time is spent on react-ui-generator, which is my main project. So, I don't have any more time to maintain this package. Please, fill free to fork this repository.

Getting started

import React from 'react';
import { render } from 'react-dom';
import Pager from 'react-pager';

class App extends React.Component {
	constructor(props) {
		super(props);

		this.handlePageChanged = this.handlePageChanged.bind(this);

		this.state = {
			total:       11,
			current:     7,
			visiblePage: 3,
		};
	}

	handlePageChanged(newPage) {
		this.setState({ current : newPage });
	}

	render() {
		return (
			<Pager
				total={this.state.total}
				current={this.state.current}
				visiblePages={this.state.visiblePage}
				titles={{ first: '<|', last: '>|' }}
				className="pagination-sm pull-right"
				onPageChanged={this.handlePageChanged}
			/>
		);
	}
}

window.onload = () => {
	render(React.createElement(App), document.querySelector('#app'));
};

What it looks like*

First | Prev | ... | 6 | 7 | 8 | 9 | ... | Next | Last

* Bootstrap 3.0 is required by default, but you can replace it with your own css.

Demo

Just open demo/index.html in your browser. Or see interactive demo here.

Tests

npm test

Changelog

v1.3.0

  • @kallaspriit fixed #16
  • Updates devDependencies
  • Move building procedure to Docker

v1.2.1

v1.2.0

  • Rewrited all to ES6.
  • Switched from gulp + browserify to webpack.
  • Now officially supports only React >= 15.0.0

v1.1.4

  • Updated to React 15. Thanks to contributors!

v1.1.1

  • Updated to React 0.13.
  • Updated local demo.

v1.1.0

  • Added titles property. See demo.
  • Improved building script.

v1.0.6

  • Fixed <li class="undefined" .. in "more" and "less" buttons.
  • Added a few unit-tests.

Contributors

See contributors.

You can’t perform that action at this time.