adeled / react-paginate Goto Github PK

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?

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.

Due to the use of <a> tags without href or tabindex, the page elements are not navigable by keyboard, which is a rather big accessibility issue.

If you are interested in fixing this, I can maybe attempt a pull request, either using tabindex=0, switching to buttons or adding an empty href attribute. Do you have any preference?

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...

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.

Hi , if i am navigating to 10 page of pagination the i click some button which will change the current page to 1 , activeclassname={"active"} is still active on page 10 . Any solution for this?

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.

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

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

I can not find the option to set init page number

It seems to be in devDependencies while I think it should be in dependencies (I get an error unless I add it myself to my package.json...)

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

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!

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();
  }

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

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?

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.

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

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.

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?

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

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.

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');

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.

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

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

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).

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)

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?

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

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

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

Hi

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

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

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

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

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

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).

Let say I was typing directly in the urlbar to page 6, how I am supposed to pass this page number to ReactPaginate? Because it is always start at 1

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?

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

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.

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

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

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

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>