React infinite scroll

help
1

Hi,

I’m trying to add infinite loading to a React app. I’ve found this package: https://www.npmjs.com/package/react-visibility-sensor which seemed super-useful for this: the idea was to add it to the bottom of the list, and when it becomes visible, I can increase the limit.
But here’s what I get when I add it to packages.json (other npm packages - even react components - are ok)

error: couldn't read npm version lock information: Command failed: npm ERR! missing: react@^0.13.3, required by react-context@0.0.2

Are there any components/patterns to implement infinite scoll in meteor-react?

Thanks!

2

Seems to be a package incompatibility error. Have you tried updating your packages?

3

Ah, yes, I should have spotted it - it was a problem with react-context. Thanks!

4

You’re welcome! Have fun!

5

@csiszi I’m looking to implement an infinite/endless scroll. Did the react-visible-sensor package workout well? Did you find any better solutions?

6

It works good. I added a helper which compares the length of the data with the current limit, if they’re equal and the sensor is visible, I increase the limit.

7

How does your code know when there is no more data?
Are there any performance issues if a users scrolls to the end of a giant set of data?

8

It doesn’t know exactly. I added a helper:

hasMoreItems: Session.get("itemsLimit") === items.length

Then in the component:

<ReactVisibilitySensor
    active={this.data.hasMoreItems}
    onChange={this._loadMore}
/>

loadMore:

_loadMore(isVisible) {
  if (isVisible) {
    let currLimit = Session.get("itemsLimit");
    Session.set("itemsLimit", currLimit + 10);
  }
}

Basically when the number of items is equal to the current limit, the sensor is active. If the user scrolls down, the limit will be increased and the sensor becomes inactive. If the server sends down enough items, the sensor becomes active again.