2

I'm new in ReactJs.

I need a lazy loader in my application when page is scroll down, I'm using (https://jasonslyvia.github.io/react-lazyload/examples/#/normal?_k=rz3oyn)

Actually, this is working fine but first time it load all data.

I want to make api call and set data when page will scroll down.

Thank you.

Keval Garala
  • 266
  • 1
  • 5
  • 16

1 Answers1

0

Most probably what you need is an infinite scroll functionality. There are some good options for React when it comes to loading asynchronous data:

1) If you need high performance (a lot of results coming from the server) you can try react-infinite. As docs say:

React Infinite solves this by rendering only DOM nodes that the user is able to see or might soon see.

2) Another simple option would be: react-infinite-scroller

General principle to make these libraries work is to pass their props which will let the module know when to make a request or when to wait.

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

loadFunc will make an API call to the server and will set hasMore to false until it is successfully resolved.

Shota
  • 5,523
  • 6
  • 26
  • 52
  • See also `react-virtualized` it seems to be more actively maintained lately (2017) on Github. It can calculate dynamic, varying row heights on-the-fly. https://github.com/bvaughn/react-virtualized – Donn Lee Apr 02 '17 at 02:05