I'm getting this error:

Uncaught TypeError: Cannot read property '_defaultLoader' of undefined
React.addons.InfiniteScroll.React.createClass.getDefaultProps

Looks like InfiniteScroll isn't defined when it's used for InfiniteScroll._defaultLoader in getDefaultProps (fad3759)

Any ideas? I feel like I had this working fine before... Maybe something with React.createClass changed?

Hi,

Thank you for this excellent react component!
I was looking for some improvements and I notice that there are some pending pull requests that do exactly what I was looking for.
Are you planning to execute and close them?

Cheers!

It seems this repo is not being maintained anymore...

@guillaumervls what about giving ownership of this repo to someone that will maintain it?

Who would be interested in this? @danbovey would you?

If InfiniteScroll wrapped with ReactCSSTransitionGroup then transition does not work and if ReactCSSTransitionGroup wrapped with InfiniteScroll then InfiniteScroll scroll does not work. Later case it does work if window is resized. It seems scrollTop calculation giving higher value than threshold.

Debugging this, it looks like some of the math is off. Looks like this doesn't work because you do you calculation based off of window height of height of the first node in the body. Can you just do these calculations off of the first child element?

Now it produces warning

Unknown.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.

Hi

When my page is rendered and without any user interaction, the InfiniteScroll component keeps calling the loadMore function until the hasMore is set to false. I'm expecting that the component will call the loadMore function when the user moves the scroll bar.

Any idea what am I missing here?

I see in the document that you write:

loader={{component:React.DOM.div, props:{className:'loader'}, children:'Loading ...'}}

Why don't you just take a React component as attribute?

loader={<div className="loader">Loading ...</div>}

That should be working fine

http://jsfiddle.net/mb9vJ/2

The docs state that hasMore=false will stop listening for scroll events. This isn't true if you update the component props to set hasMore=false. If it was true on initial load and you change it to false through props, the scrollHandler is still there. This has caused, in our case, a 2nd query to the service for the same page that you're currently on.

Need to update to use ReactDOM package instead to clear out warnings.

Every time the loadmore event is triggered, it triggers two times

When scrolling I'm getting an Uncaught TypeError: this.getDOMNode is not a function in below function

scrollListener: function () {
          var el = this.getDOMNode();
          var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
          if (topPosition(el) + el.offsetHeight - scrollTop - window.innerHeight < Number(this.props.threshold)) {
            this.detachScrollListener();
            // call loadMore after detachScrollListener to allow
            // for non-async loadMore functions
            this.props.loadMore(this.pageLoaded += 1);
          }

In attachScrollListener why do we fire scrollListener(), it causes load more without even any scroll or resize event happening ?

I've noticed in my project, that when a component/container will load at first, the infinite scroll will request twice.
You can also see this in the example: http://cassetterocks.github.io/react-infinite-scroller/demo/, notice the Network request.

If your project is ES6, i recommend you 'react-infinite-scroll-es2015'.

https://github.com/vdv73rus/react-infinite-scroll-es2015/blob/master/package.json

I understand how react itself uses browserify, but we have a repo that uses other stack and we use bower to manage dependencies.

I am trying to use this plugin in my react 16.2 project, but it is giving following error:

Does it support React 16.2, if not are there any chances that it will support React 16 in near future?

When using the TransitionGroup animation to transition from one page to another, I had a problem whereby the transition wasn't happening when InfiniteScroll was on the page.

I couldn't quite put my finger on what was causing it – although it seems to be caused by line 35, which is utterly bizarre, as that's a read-only line.

Nonetheless, I was able to fix it by monkey patching the componentDidMount and componentDidUpdate methods:

import IScroll from 'react-infinite-scroll';

// ...

const InfiniteScroll = IScroll(React);

// ...

InfiniteScroll.prototype.componentDidMount = function() {
    this.pageLoaded = this.props.pageStart;
    requestAnimationFrame(() => this.attachScrollListener());
};

InfiniteScroll.prototype.componentDidUpdate = function() {
    requestAnimationFrame(() => this.attachScrollListener());
};

The jsfiddle doesn't seem to work at the moment?

Cannot read property '_defaultLoader' of undefined
Cannot read property '__reactAutoBindMap' of undefined

Does this component support Drop-down loading?

Hello :)

shouldn't getInitialState be changed to componentWillMount ? getInitialState is supposed to set initial state and it is supposed to return value. Right now error occurs when you use getInitialState.

getInitialState: function () {
this.pageLoaded = this.props.pageStart;
}

====>

componentWillMount: function () {
this.pageLoaded = this.props.pageStart;
}

best,
J :)

Uncaught TypeError: Cannot read property 'scrollHeight' of null at InfiniteScroll.scrollListener

i meet this question when keep live page,cureent page use it, click back,the last page use it

as title

if I set pageSize = 2, and there will be no scroll bar, thus would not trigger next request

This should probably not just keep firing when content is delayed from loading/rendering as is the case with any network calls.

Should we watch for SUCCESS events and block until then?

I'm looking to add infinite scroll to elements within a scrollable div. Is there a way to do this easily? Suggestions?

the loadMore function is called once, but after that initial call, even when reaching the bottom of the list, the loadMore function is never called again. Can't seem to solve myself, no console errors.