1

I am creating an React project where i am rendering the data by calling the api, and api every time gives me array of data of length 10. i am using react-infinite-scroll-component for using infinite scrolling functionality. i want to load data everytime whenever i scroll at the half part of the screen i don't want to show a loader on my screen. can anybody help me on it.



 <InfiniteScroll
            dataLength={data.length}
            next={fetchMoreData}
            hasMore={true}
            loader={
              <CircularProgress/>
            }
          >
            {data.map((item, index) => {
              return <Card data={item} key={index} />;
            })}
          </InfiniteScroll>

this is my code of infinite scrolling, i tried changing the dataLength props , but it didn't worked.

Geetanjali Katare
  • 55
  • 1
  • 9

1 Answers1

1

I think you may want to use the scrollThreshold property as that defines when next will be called.

You can pass a floating point number e.g 0.5 or a string e.g "200px" in order to define this.

If you are looking to remove the loader just omit that prop.

Sourced from list of props here: https://www.npmjs.com/package/react-infinite-scroll-component

user3593387
  • 26
  • 3