loadMore() { console.log('------> LOAD MORE') this.setState({ ...this.state, pageStart: this.state.pageStart++ }) }

<InfiniteScroll initialLoad={ false } pageStart={ this.state.pageStart } loadMore={ this.loadMore } hasMore={ this.state.hasMore } /* always true */ threshold={ 50 } useWindow={ false } loader={ loader }> ...content </InfiniteScroll>

loadMore function is not called. Can you tell me please why i'm encountering this problem ?

thank you !

Hi,

I noticed on safari mobile that it loads forever when initially loading the page. I have useWindow=false.

I looked at this line:

offset = el.offsetHeight - el.parentNode.scrollTop - el.parentNode.clientHeight;

It seems new elements are loaded if offset is larger than the threshold.And offset never changed even when loading elements.

Elements in my scenario are added to the bottom of the list.scrollTop is always 0 and clientHeight is the size of the viewable container.

The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.

If change this to el.scrollHeight it seems to work.

The scrollHeight property should return the height independent of whether it is viewable or not.

offset = el.scrollHeight - el.parentNode.scrollTop - el.parentNode.clientHeight;

best regards,
Florian

The npm reference is still guillaumervls's older version without the updates. It might be good to at least remove that reference from the README until you create your own npm package?

I'm using react-infinite-scroller to load a large list of images and it is working great. I start by loading the first 10 images. However I only want to show 30 images on screen at once so once 30 images have been loaded I start to not render those near the top of the page. But now if the user scrolls back up the page they won't see those images anymore so I want some sort of trigger to begin showing those again.

I know this isn't a straightforward feature but I'm thinking that in addition to loadMore there could be a loadTop that would fire when the user begins scrolling back up towards the top of the page (based on a topThreshold) that could be used to figure out which 30 images to show (near the top or near the bottom of the list).

Is this something that is in scope for this project? I could work-around it by attaching my own scroll listener and logic to the container but I'd rather not reimplement that code in my project.

Replace with ref callback attribute

Hi, I am trying to use react-infinite-scroller in react-boilerplate . But when I try to run server, it gives me following error:

Anyone experienced this issue?

Hi,
I've passed some time trying to update the orginal react-infinite-scroller and shame on me, I didn't see your fork.

I ended making some improvements on the original script (the one your forked), but the most efficient change I did was to debounce the position checking and loadMore things. I've adapted to my needs, hope it's readable.

The idea is very simple :

• in the constructor, you set a this.debounceTimeout to null
• in the scrollListener you check if this.debounceTimeout is null. If yes, you set it to a setTimeout(load_more_if_needed, 250), if not you just pass your way.

As a window.addEventListener("scroll", this.scrollListener); will fire scrollListener a lot of time, and very fast, it's gonna do some calculations all the time. it's better explained there.

I don't have time and enery to make a pull request from your fork, sorry.

I am getting an infinite loop issue
This may be related to #14 and #18

I tried both solutions with no luck

So I did some investigation and I only can relate the whole thing to this line
which is essentially executes this.scrollListener() Which I am not sure why would you call that method after attaching it to an event.

Unless I am missing something, when I commented out that line everything went as expected.

I am using react 0.14.3 and the component works. the only issue is that it gives conflicts whenever i try to save it to the package.json

The title is self explanatory. We should add className prop to set the element class.

<InfiniteScroll
           className="some-cool-class"
           element='span'
           pageStart={0}
           initialLoad={false}
           loader={<Loader />}>
           {/* Items */}
</InfiniteScroll>

Currently the way it's coded with use of

var component;

you can only have one InfiniteScroller!

Just a simple fix to change lines like

var el = ReactDOM.findDOMNode(component);

into

var el = ReactDOM.findDOMNode(this);

and binding the scroll event listeners properly 😑

Hi!
How it use for table tag ?
<table><thead></thead><InfiniteScroll><tr>Item</tr><tr>Item</tr><tr>Item</tr></InfiniteScroll></table>

Settings
element="tbody" pageStart={1} loadMore={this.loadItems.bind(this)} hasMore
Event don't working, when user scroll items.
Thx for help!

react-addons-test-utils has been deprecated and has been put in the react-dom package since React v15.5.0.

CC: @danbovey

First commit (57c8ef3) was for Cassette's requirements but that could break in others' use cases.

Some formal testing in mocha or similar 💯

The new scroll anchoring feature introduced in Google Chrome 56 forces the scrolling to the bottom of the page, which in turn triggers infinite scrolling. See angular-ui/ui-scroll#138.

A temporary fix would be to set overflow-anchor: none; to the parent element.

After change size window, scroller load all items. If their more 1000, page freeze. How prevent load items, after change size window?

Add support for React 0.14.7, and allow the original repo to host the 0.13.x version.

Why would the component call loadMore continuously and endlessly with increasing page numbers once I reach (only once) the end of the list? What am I doing wrong? FYI, I am using redux for this.

Thanks!

Is a change log or release note available anywhere? Are there any breaking changes from 0.2.10 to 1.0.1?

It would be great to have a component (or wrapper) prop that would allow to chose the container element, ie:

<InfiniteScroll
      pageStart={0}
      loadMore={loadFunc}
      hasMore={true || false}
      component={<ul className="my-list">{props.children}</ul>}
      loader={<div className="loader">Loading ...</div>}>
    {items} // <-- This is the content you want to load
  </InfiniteScroll>

Hi, after the update we are getting this lint error Unable to resolve path to module 'react-infinite-scroller' when the package is imported this way (as it used to be) import InfiniteScroll from 'react-infinite-scroller'; . There must be something wrong with the package configuration since I am able to import the package as import InfiniteScroll from 'react-infinite-scroller/dist/InfiniteScroll';

Hey!

I'm inspecting the page source, but it would be awesome to just be able to view the example source code on Github. Any chance you could publish the source code for the example here - perhaps in an /examples folder? Would be super great!

Thanks so much!

Keren

Edit: This example --> http://cassetterocks.github.io/react-infinite-scroller/demo/

I am using the module in an environment where the scroll events are not dispatched due to the missing useCapture flag in EventTarget.addEventListener():
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Adding a props.useCapture:boolean with default to false would make the module more versatile.

I can submit a pull request for that if you want

Adding this issue because it was asked to me directly.

If you're filtering items, and the data needs to be completely changed, the page needs to be reset back to pageStart.

One solution is adding a method to the component: guillaumervls#29

But really, if you need your own pagination methods, you should handle it in the state of your own component and ignore the pageToLoad parameter that you're given.

Hi,

Is there a way to assign a className to the specified InfiniteScroll 'element'?

Would be nice to have a throttle option for the scrollListener function (limit firing of the event). Could probably pull most of the code from underscore.

Currently working on a project where the wrapper, which can be scrolled, has following styling:

.style {
    height: 100%;
    overflow-y: auto;
}

In this case offset needs to be calculated like this:

offset = el.parentNode.scrollHeight - el.parentNode.scrollTop - el.parentNode.clientHeight;

instead of this:

offset = el.scrollHeight - el.parentNode.scrollTop - el.parentNode.clientHeight;

How about a prop (boolean) relativeParentHeight?

Hi,

I encountered a sweet little problem when using the InfiniteScroller inside of an iFrame.
The iFrame is called a ContentFrame in the Content Management System.
The CMS Editor UI automatically updates the iFrames height to the documents height to prevent the iFrame from having scrollbars.

This triggers a permanent loadMore in the InfiniteScroller.
I think the calculation for the threshold value is currently not flexible enough to cover this case.

Wouldn't it make more sense to change the comparsion operator from

if (offset < Number(this.props.threshold))

to

if (offset <= Number(this.props.threshold))

Otherwise someone would need to pass threshold={1} to get a true at 0 offset.

It seems to fire off 2 or 3 calls to loadMore while my loadMore is off making a network request to get the items. Would it perhaps make sense to add some way for us to confirm that loadMore is completed before another request is fired off?

Why the loadMore={loadFunc} works all the time?
Although the page of items is full ?

function "loadMore" is calling after page loaded - not after scrolling

Need a package name that isn't taken

Hi! I was looking to try it out and was wondering if it is possible to have a demo link for the project? The original project's demo link doesn't work either and since this is being maintained, it would be great to have one to check out the plugin!

Thanks for maintaining this!

It would be great if this component would support a boolean property like flipped or reversed or something that would invert the scrolling. This is ideal for lists that start at the bottom like chat messages.

I am using "react-infinite-scroller": "^1.0.11". It looks good but I am running into a problem. Here is how to regenerate the issue.

1. I load a component that makes use of InfiniteScroll.
2. The component receives the first chunk of data with no issues.
3. I scroll down to the end, the next chunk of data get loaded and the component gets updated with all data (previous and new). So everything is good so far.
4. Now, I turn the network off. I scroll to the bottom of the page, but obviously I run into Network error which is expected.
5. Now, I turn the network on. I scroll to the bottom of the page, new data comes back from the server BUT the new data never show up in the component. So component render with old data. For some reason. The component never see the new data even though I am very sure that the new data was loaded.
   I tried the test on the demo and same result appears.
   Could you please let me know if there is a fix to this.
   Thanks

I'm using this with backbone. But I'm not getting expected result. the browser is keep on hitting the server and getting the data. I didn't even started scrolling. It's not getting stopped.

when I import react-infinite-scroller, it throw this error, I don't know how to resolve.
version :

react-infinite-scroller 1.0.8
react 15.5.4

I'm using this comp because unlike this one, it doesn't require to know the inner elements heights.

However, I have an issue when using it with useWindow=true.

It compute a topPosition(el)= 9961 so that the threesold is never reached...

Have you experienced this issue as well ?

Requested by @nidhi-ag in guillaumervls#40

Setting hasMore to "false" from another function that is not triggered by the callback doesn't remove the event listeners. Is this intentional?

Hi everyone!

Is it possible to give an extra parameter to the loadMore function, so I can know if it's pulled from the top or scrolled to the bottom?

I'm making a Mail-webclient and initialize the list of Mails with the first 25 mails.
When I scroll down I want to load the next 25, ...
But when I scroll to the top I want to load the first page again.
Is this possible in any way?
The page-number is always additioning so... :/

I am making ajax request 5 times and updating my "items" array on each request. But InfiniteScroll Component is loading all data at once. It does not wait me to scroll and then load the further data. Please help.

src used prop-types
import PropTypes from 'prop-types';
but prop-types defined in package's devDependencies
so after i installed, can not resolve module 'prop-typs',
should prop-types in package defined in dependencies?

Hey, I've installed the package via NPM and require it as follows:

var InfiniteScroll = require('react-infinite-scroller');

Apparently, something goes wrong as I have a react error:

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Search.

To what I see, the require returns a function. Probably I require it in a wrong way (although I do it in the same way I require other react libs). Maybe the solution is in your phrase "require with main in package.json", but I can't figure out what does it mean. Can you help? Thanks.

Wouldn't it be more fitting to validate children and loader prop with PropTypes.node, as in anything that can be rendered?

The 'page' parameter is unused in https://github.com/CassetteRocks/react-infinite-scroller/blob/master/docs/src/index.js#L23

Is there Typescript type definitions anywhere for this project?

If there were, I would expect to find them bundled in the package, or secondarily as part of the https://github.com/DefinitelyTyped/DefinitelyTyped project and an npm package called @types/react-infinite-scroller

React.PropTypes has been extracted to it's own package since React v15.5.0.

The following warning is displayed if that version of React is used:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I created a test component to begin working the the infinite scroller and found an issue with scrolling to the bottom of the wrapper div: it won't stop fetching. I noticed your docs example will push the new items down, but my scrollbar seems to stick at the bottom. Is this a CSS issue? I'm open to any quick fix so that these lists don't infinitely fetch.

import React, { Component }  from 'react';
import InfiniteScroll from 'react-infinite-scroller';

function createNumbersArray(start, length) {
  const arr = new Array(length);
  for (let i = 0; i < arr.length; i++) {
    arr[i] = start + i;
  }

  return arr;
}

function fetchNumbers(start, length) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        const newNumbers = createNumbersArray(start, length);
        resolve(newNumbers);
      } catch (err) {
        reject(err);
      }
    }, 3000);
  });
}

const LIMIT = 10;

export default class TestInfiniteScroll extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],

      // Was too lazy and this fixed initial load at 0, 10
      start: -10,
    };

    this.loadMore = this.loadMore.bind(this);
  }

  componentDidMount() {
    this.loadMore();
  }

  loadMore() {
    console.log('FETCHING MORE');
    const oldItems = this.state.items;
    const start = this.state.start + LIMIT;
    fetchNumbers(start, LIMIT)
      .then(newItems => this.setState({ items: [...oldItems, ...newItems], start }))
      .catch(err => console.log(err));
  }

  render() {
    const { items } = this.state;
    const itemComponents = items.map((item) => {
      return (
        <div
          style={{ height: '50px', padding: '5px', border: '1px solid grey', backgroundColor: 'white' }}
          key={Date.now() + item}
        >
          {item}
        </div>
      );
    });

    const hasMore = items.length < 100;
    return (
      <div>
        <h1>InfiniteScroll</h1>
        <div style={{ height: '400px', overflow: 'auto', border: '2px solid' }}>
          <InfiniteScroll
            pageStart={0}
            loadMore={this.loadMore}
            hasMore={hasMore}
            loader={<div>Loading ...</div>}
            useWindow={false}
            threshold={5}
          >
            {itemComponents}
          </InfiniteScroll>
        </div>
      </div>
    );
  }
}