adeled / react-paginate Goto Github PK

View Code? Open in Web Editor NEW

2.7K 15.0 621.0 5.79 MB

A ReactJS component that creates a pagination

License: MIT License

JavaScript 99.37% CSS 0.63%

react-component paginate pagination paginator pagination-components

react-paginate's Introduction

react-paginate

A ReactJS component to render a pagination.

By installing this component and writing only a little bit of CSS you can obtain this: Note: You should write your own css to obtain this UI. This package do not provide any css.

Installation

Install react-paginate with npm:

npm install react-paginate --save

Usage

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';

// Example items, to simulate fetching from another resources.
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

function Items({ currentItems }) {
  return (
    <>
      {currentItems &&
        currentItems.map((item) => (
          <div>
            <h3>Item #{item}</h3>
          </div>
        ))}
    </>
  );
}

function PaginatedItems({ itemsPerPage }) {
  // Here we use item offsets; we could also use page offsets
  // following the API or data you're working with.
  const [itemOffset, setItemOffset] = useState(0);

  // Simulate fetching items from another resources.
  // (This could be items from props; or items loaded in a local state
  // from an API endpoint with useEffect and useState)
  const endOffset = itemOffset + itemsPerPage;
  console.log(`Loading items from ${itemOffset} to ${endOffset}`);
  const currentItems = items.slice(itemOffset, endOffset);
  const pageCount = Math.ceil(items.length / itemsPerPage);

  // Invoke when user click to request another page.
  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % items.length;
    console.log(
      `User requested page number ${event.selected}, which is offset ${newOffset}`
    );
    setItemOffset(newOffset);
  };

  return (
    <>
      <Items currentItems={currentItems} />
      <ReactPaginate
        breakLabel="..."
        nextLabel="next >"
        onPageChange={handlePageClick}
        pageRangeDisplayed={5}
        pageCount={pageCount}
        previousLabel="< previous"
        renderOnZeroPageCount={null}
      />
    </>
  );
}

// Add a <div id="container"> to your HTML to see the component rendered.
ReactDOM.render(
  <PaginatedItems itemsPerPage={4} />,
  document.getElementById('container')
);

Test it on CodePen.

You can also read the code of demo/js/demo.js to quickly understand how to make react-paginate work with a list of objects.

Finally there is this CodePen demo, with features fetching sample code (using GitHub API) and two synchronized pagination widgets.

Props

Name	Type	Description
`pageCount`	`Number`	Required. The total number of pages.
`pageRangeDisplayed`	`Number`	The range of pages displayed.
`marginPagesDisplayed`	`Number`	The number of pages to display for margins.
`previousLabel`	`Node`	Label for the `previous` button.
`nextLabel`	`Node`	Label for the `next` button.
`breakLabel`	`Node`	Label for ellipsis.
`breakAriaLabels`	`Shape`	Aria labels of ellipsis elements (Default are `{ forward: 'Jump forward', backward: 'Jump backward' }`).
`breakClassName`	`String`	The classname on tag `li` of the ellipsis element.
`breakLinkClassName`	`String`	The classname on tag `a` of the ellipsis element.
`onPageChange`	`Function`	The method to call when a page is changed. Exposes the current page object as an argument.
`onClick`	`Function`	A callback for any click on the component. Exposes information on the part clicked (for eg. `isNext` for next control), the next expected page `nextSelectedPage` & others. Can return `false` to prevent any page change or a number to override the page to jump to.
`onPageActive`	`Function`	The method to call when an active page is clicked. Exposes the active page object as an argument.
`initialPage`	`Number`	The initial page selected, in uncontrolled mode. Do not use with `forcePage` at the same time.
`forcePage`	`Number`	To override selected page with parent prop. Use this if you want to control the page from your app state.
`disableInitialCallback`	`boolean`	Disable `onPageChange` callback with initial page. Default: `false`
`containerClassName`	`String`	The classname of the pagination container.
`className`	`String`	Same as `containerClassName`. For use with styled-components & other CSS-in-JS.
`pageClassName`	`String`	The classname on tag `li` of each page element.
`pageLinkClassName`	`String`	The classname on tag `a` of each page element.
`pageLabelBuilder`	`Function`	Function to set the text on page links. Defaults to `(page) => page`
`activeClassName`	`String`	The classname for the active page. It is concatenated to base class `pageClassName`.
`activeLinkClassName`	`String`	The classname on the active tag `a`. It is concatenated to base class `pageLinkClassName`.
`previousClassName`	`String`	The classname on tag `li` of the `previous` button.
`nextClassName`	`String`	The classname on tag `li` of the `next` button.
`previousLinkClassName`	`String`	The classname on tag `a` of the `previous` button.
`nextLinkClassName`	`String`	The classname on tag `a` of the `next` button.
`disabledClassName`	`String`	The classname for disabled `previous` and `next` buttons.
`disabledLinkClassName`	`String`	The classname on tag `a` for disabled `previous` and `next` buttons.
`hrefBuilder`	`Function`	The method is called to generate the `href` attribute value on tag `a` of each page element.
`hrefAllControls`	`Bool`	By default the `hrefBuilder` add `href` only to active controls. Set this prop to `true` so `href` are generated on all controls (see).
`extraAriaContext`	`String`	DEPRECATED: Extra context to add to the `aria-label` HTML attribute.
`ariaLabelBuilder`	`Function`	The method is called to generate the `aria-label` attribute value on each page link
`eventListener`	`String`	The event to listen onto before changing the selected page. Default is: `onClick`.
`renderOnZeroPageCount`	`Function`	A render function called when `pageCount` is zero. Let the Previous / Next buttons be displayed by default (`undefined`). Display nothing when `null` is provided.
`prevRel`	`String`	The `rel` property on the `a` tag for the prev page control. Default value `prev`. Set to `null` to disable.
`nextRel`	`String`	The `rel` propery on the `a` tag for the next page control. Default value `next`. Set to `null` to disable.
`prevPageRel`	`String`	The `rel` property on the `a` tag just before the selected page. Default value `prev`. Set to `null` to disable.
`selectedPageRel`	`String`	The `rel` propery on the `a` tag for the selected page. Default value `canonical`. Set to `null` to disable.
`nextPageRel`	`String`	The `rel` property on the `a` tag just after the selected page. Default value `next`. Set to `null` to disable.

Demo

To run the demo locally, clone the repository and move into it:

git clone [email protected]:AdeleD/react-paginate.git
cd react-paginate

Install dependencies:

npm install

Prepare the demo:

npm run demo

Run the server:

npm run serve

Open your browser and go to http://localhost:3000/

Contribute

See CONTRIBUTE.md

react-paginate's People

Contributors

Stargazers

Watchers

Forkers

artsu gianu kyojin kwizzn mikepfirrmann bdefore ragingsquirrel3 tors 410675629 yega matiasgarcia wejendorp tony1223 srolel miraks roxasshadow evgenykochetkov merri sonian bjyoungblood fudong1127 lukaszklis yetone yantakus tarkanlar vladimirpal cantemointernal lancetw lottid lyon-liao startupmakers ianoxley duataud mattyaodoit garronmichael willshawzq addnab platan duskogrujovic matbrady stephencarr nhz-io teknologist home24 veyh yuvalziegler tsungcheyu ryan-sherpa roshanraj sergiu-paraschiv 360i k5o minfawang tarmo denisizmaylov benterprise tarnas14 fearintino ericpalakovichcarr stepankuzmin foxsportsaustralia zwjjap robawilkinson imkeke artembarmin lucasjsoliveira dnewcome we-fe-team olegafx jmancherje infinitered york-agideo kweestian hackingbeauty cattekin msn0 mikedamage alexander-manley mobmerry dsdharam91 rimlin donperi dybky crangelina mikey0000 leonascimento rajanand02 hosseinmh stcom77 shiblev snags88 gombaniro razh ederjuarez okta2510 hqiaozhang harrifeng jonekee lsroman pkoszalka

react-paginate's Issues

Could not load module as document

Use webpack to compile the es6 file.and the react-paginate module can not load successfull.

the es6 way

import ReactPaginate from 'react-paginate';

the same as CommonJS

var ReactPaginate = require('react-paginate');

Change page programmatically

I need to change page programmatically without clicking on certain page label:

Here user will input a page number, press enter and go to it. But if I enter a page number it is not stored in component's variable 'selected', so if I click on next arrow component goes to 2nd page not 6th (see image). That happens because 'clickCallback' is invoked directly in my component. Is there a way to update currently selected page from outside code?

provide option for default selection

i am using initialSelected for defaultPage selected but it fires a callback thats creating a recursion in the code.How do i set selected page number from outside everytime

Test fails

PaginationBoxView-test.js fails:

➜ make test

> [email protected] test /home/user1/react-paginate
> BABEL_JEST_STAGE=0 jest

Using Jest CLI v0.8.2, jasmine1
 FAIL  __tests__/PaginationBoxView-test.js 
● Runtime Error
SyntaxError: /home/user1/react-paginate/__tests__/PaginationBoxView-test.js: Unexpected token (11:4)
npm ERR! Test failed.  See above for more details.
make: *** [test] Błąd 1

My env:

node - 5.5.0
npm - 3.3.12

I got the same error while building on travis: https://travis-ci.org/platan/react-paginate/jobs/107331414

Force new current page as property

I understand that when the component mounts, I can pass initialPage as a property. After that, the current page is determined by internal state. For me, the problem is that I want to reset the current page from the parent (as a property).

My use case is paginated search results, and I want to always be on the first page after a new search. Right now, it seems I can only do this by unmounting the paginate component, and passing a new initialPage.

The solution, for me, would be to have an optional currentPage property, which, if absent, would defer to existing behavior.

Bower

When I'm trying to bower install react-paginate, isn't this project that comes.
Can I use it with bower?

Support React v15

This probably does not require any JS changes. I tested the demo with v15 and it works.
It probably requires #55 though.

Error in PaginationBoxView

Getting the below issue on installing and using it.

ERROR in .//react-paginate/dist/PaginationBoxView.js
Module not found: Error: Cannot resolve module 'react-addons-create-fragment' in
/home/superprofs/cms/node_modules/react-paginate/dist
@ .//react-paginate/dist/PaginationBoxView.js 17:33-72

"subContainerClassName" is not used

It seems that there's no need for "subContainerClassName" anymore. So it should be removed from documentation and "propTypes".

Update active page

How would I update/sync the active page in these instances:

Having two identical pagination components on the page, one is clicked.
Re rendering with a different dataset, but the previous one was viewing a page > 1.

add default styles

Handle page click in sample makes two ajax requests instead of one

Line 68 should be deleted, file sample.jsx:

handlePageClick = (data) => {
    let selected = data.selected;
    let offset = Math.ceil(selected * this.props.perPage);

    this.setState({offset: offset}, () => {
      this.loadCommentsFromServer();
    }.bind(this));

   //Line 68:  this.loadCommentsFromServer();
  }

Tags for releases

It would be nice to add a tag for new releases so we can quickly go back to an older release. (especially useful in Github)

baseline page prop

It would be nice to have a property that could be passed in to define the baseline for the pages. Right now the baseline is hard coded as 0, but it would be nice to change it to baseline at 1.

What are your thoughts? Any particular reason not to do this? It would help me out in my current project as my routes follow the pagination and I hate to see a route with a 0 in it.

I'd be happy to contribute a pull request to make this happen.

Use with React 0.14.X causes warnings

Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.

Break page className support

Hi there! I think, that it would be more consistent to support label for ellipsis className instead of hardcoding break as className.

how to set init page number?

I can not find the option to set init page number

clickCallback gets called without a click

Hello,

I noticed that when react-paginate first gets displayed on a page, it automatically calls the clickCallback handler.

I don't want it to do this. I just want the clickCallback handler called when a page number is clicked.

Am I doing something wrong?

clickCallback( ) is constantly called (after update)

Hello everyone. I'm updating React and all dependent libraries of my project and came across this problem. On pages where I use react-paginate constant requests to server are firing because clickCallback( ) is called permanently, without any actions from user, as the page even can't load as it should.

Here is code of my component https://jsfiddle.net/o2mqz62m/

Here is my package.json https://jsfiddle.net/g5x0hamk/

I would appreciate any help from you

Generates invalid HTML

Current implementation generates ul and span elements as direct children of ul, which is against the spec.

Separate labels for first and second break element

I would like to set different values for break elements in order to create such pagination:
1 ... 4 5 6 of 32
What do you think about this?

Breaks with jspm

this is due to the following bit of code in the (I assume transpiled) PageView.js

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

...

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

wheeelp _react is a perfectly proper module with a default on it. But it doesn't have __esModule because as far as I can tell this is non-standard. So this interop function actually ends up re-wrapping things and breaking interop!

Documentation please

I'm evaluating this component, but even looking at the example, it is not clear how the api works.

Is there the equivalent of current, total, and max parameters?

react-dom version bump

Do you all have plans to bump the react-dom version?

webpack WARNING too many

WARNING in /Users/admin/~/React/lib/ReactChildren.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/ReactChildren.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/ReactElement.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/ReactElement.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/PooledClass.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/PooledClass.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/traverseAllChildren.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/traverseAllChildren.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/ReactCurrentOwner.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/ReactCurrentOwner.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/Object.assign.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/Object.assign.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/canDefineProperty.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/canDefineProperty.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/~/fbjs/lib/emptyFunction.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/~/fbjs/lib/emptyFunction.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/~/fbjs/lib/invariant.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/~/fbjs/lib/invariant.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/~/fbjs/lib/warning.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/~/fbjs/lib/warning.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/ReactInstanceHandles.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/ReactInstanceHandles.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.


WARNING in /Users/admin/~/React/lib/getIteratorFn.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/getIteratorFn.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/React/lib/ReactRootIndex.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in /Users/admin/~/react/lib/ReactRootIndex.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

Html structure. previous, next links under the subcontainer

Is there a good reason not to use widely accepted bootstrap structure having previous, next in the same level as page numbers? Trying to use bootstrap styling with this is a headache.

<ul class="pagination">
  <li class="disabled"><a href="#"><span>«</span></a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#"><span>»</span></a></li>
</ul>

This is the current structure

<ul>
  <li class="disabled"><a href="#"><span>«</span></a></li>
  <li>
    <ul>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
  <li><a href="#"><span>»</span></a></li>
</ul>

Precompiled release

Hi,

is it possible to provide a pre-compiled release of react-paginate that only requires react.js and react-dom.js to be included? This could ease, for example, some easy tutorials without having to install npm.

Thanks and best regards

Kai

Not allowed attributes on <a> tag

With React ^15.2.0 the following warning is thrown in browser

Warning: Unknown props `pageClassName`, `pageLinkClassName`, `activeClassName`, `page` on <a> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

Unexpected token

Hello,
I'm getting an unexpected token on handlePageClick = function handlePageClick(data) , what does this mean , surely I missed something.
Trying to run it in a symfony app via https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js

clickCallback not invoked when click on prev or next

Hello,

This is a bit strange because I remember seeing this work, but now when I click on next/prev (instead of a specific page number) the clickCallback function is not called.

Taking handleNextPage as an example, shouldn't this:

if (this.state.selected < this.props.pageNum - 1) {
      this.setState(function (previousState, currentProps) {
        return { selected: previousState.selected + 1 };
      }, (function () {
        this.handlePageSelected(this.state.selected);
      }).bind(this));
    }

actually be

if (this.state.selected < this.props.pageNum - 1) {
      this.setState(function (previousState, currentProps) {
        return { selected: previousState.selected + 1 };
      }, (function () {
        this.clickCallback();
      }).bind(this));
    }

That is, after changing the selected page invoke the callback. The issue is that handlePageSelected will receive a selected page that is equal to the current one, and won't fire the callback.

React warning about numeric keys

When rendering this component, React gives the following warning:

Warning: Child objects should have non-numeric keys so ordering is preserved. Check the render method of PaginationListView. See https://fb.me/react-warning-keys for more information.

Invalid prop `breakLabel` supplied to `PaginationBoxView`, expected a ReactNode

I used the versino 0.4.1 and copy your provided example.

I got the following warning :

Warning: Failed propType: Invalid prop `breakLabel` supplied to `PaginationBoxView`, expected a ReactNode. Check the render method of `TableBox`.

Uncaught Error: Invariant Violation: PaginationBoxView.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

What's the purpose of breakLabel by the way ? Is it a ReactNode or a String ?

Best regards

Inline styling support?

Any interest in adding support for passed-in style objects for inline styling? I'd be happy to submit a PR.

NPM package is broken

Take a look at https://www.npmjs.com/package/react-pagination . I had a conversation with the NPM folks. Apparently the package was released using a very old and buggy version of NPM. Could you please republish it using a new version to make the package available?

Too few className customizations

In it's current state it is not possible to customize this component to use BEM style classes as not all generated elements have className set and some other classNames are simply forced and are not customizable (disabled, previous, next).

server side render

Hi, Did you try to render react-paginate from the server side? After you changed to createFragment, the clients side works fine, but I get an error when I try to render from the server :

    firstChildren[0] = deepestAncestor.firstChild;
                                      ^
TypeError: Cannot read property 'firstChild' of undefined

Thanks, Anton

package.json should better include react-dom as peer dependency

Hi,
You are using react-dom in your package.json file under dependencies. In my opinion this should be better under peer dependencies. If someone is already using React in his project then it may cause weird conflicting issues.

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

This worked for me before, so maybe it's a compatibility issue with react 0.13?
I simply require('react-paginate'), then try to render ReactPaginate:

    React.render(<ReactPaginate />, document.getElementById(options.element_id))

and I get the error:

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null ReactClass.js:842 ReactClass.createClass.Constructor ReactLegacyElement.js:191 ReactLegacyElementFactory.wrapCreateElement.legacyCreateElement PaginationBoxView.jsx:84 React.createClass.render ReactCompositeComponent.js:1260 
(anonymous function) ReactPerf.js:50 
ReactPerf.measure.wrapper ReactCompositeComponent.js:802 
(anonymous function) ReactPerf.js:50 
ReactPerf.measure.wrapper ReactComponent.js:405 ReactComponent.Mixin._mountComponentIntoNode Transaction.js:134
 Mixin.perform ReactComponent.js:381 
ReactComponent.Mixin.mountComponentIntoNode ReactMount.js:312 
(anonymous function) ReactPerf.js:50 
ReactPerf.measure.wrapper ReactMount.js:381 
ReactMount.render ReactPerf.js:50 
ReactPerf.measure.wrapper TabContent.js.jsx:92 
category_show

category_show is the first function called and is just doing the render...

Broken React 0.14 support

Today I found that new version of react-paginate stopped working. Looks like you forgot to bump up repo version to 2.0. (changing React version could broke someones project).

What is the json structure exactly?

Support a way of setting `href` for the generated links

I'm using Prerender over my SPA for googlebot and need to set the href attributes of the generated links. rel="next" and rel="prev" would be useful too.

I'm going to fork and make the changes I need but don't have time to submit a proper PR (tests, documentation, go through webpack...) right now.

React throws warnings after updating to 0.4.2

Hello! I'm using your library and after updating to the latest version (0.4.2) I got alot of this warnings on page load:

Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

I guess the problem is that the clickCallback is now called also on initialization. That cause me problems because I'm using the paginator on a table whose items are loaded via an ajax call. Calling the clickCallback will cause another action to be emitted which loads the items with a new page property's value. How it is possible to avoid this? Couldn't be added a boolean props (default to true) which tells the Paginate Component to or not to call the clickCallback on initialization?

Thanks.

Danger: Discarding unexpected node

The pagination component is not working properly for me. I keep getting the following error

Danger: Discarding unexpected node <li class="disabled"></li>

i am using react 0.14.8, react-dom 0.14.8 and react-paginate 0.5.7

Move page click handler to parent element so click target is larger

I'm proposing that the click handler be moved from the a element up to the li element. The current click target in most cases will be a single numeral. I needed to support a larger click target for my use case so I moved the click handler up to the parent element.

PR: #82

Setting new selected value post-mount

I'm attempting to manipulate the selected page number of PaginationBoxView without a user click (such as on pushState) after the component has been mounted. What I found was that the selected state wasn't updating because that state is only set before the initial mount.

I opened a PR with a simple solution using componentWillReceiveProps, let me know if this is appropriate: #61