i want my react component to load more data when i scroll to half of my screen

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.

>Solution :

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