Infinite scrolling problem

[sm2017]

I used onEnter and onPositionChange props to implement an infinite scroll I have a problem with react-waypoint , when height of loaded elements is less than Boundary's height onPositionChange if not fired again , it fired only with scrolling , so I cannot load next page

If I make browser window smaller , so Boundary's height is less than height of loaded elements , so by scrolling I fire onEnter and onPositionChange again and next page loaded

[sm2017]

@lencioni @trotzig Can you please help me

[trotzig]

Hi @sm2017! Did you try using a key prop? It's listed in the usage section in the readme. Something like:

<Waypoint
  key={cursor}
  onEnter={this._loadMoreContent}
/>

[sm2017]

@trotzig it looking awesome , but what is cursor exactly? If I pass result array as key, it will fetch after invisibility too

[trotzig]

Something like this could work:

const [cursor, setCursor] = useState(0);

...

<Waypoint
  key={cursor}
  onEnter={async () => {
    await loadMoreContent();
    setCursor(cursor+1);
  }
/>