CODEWITHSUNDEEP
reactjsinfinite-scroll
cat_lover
cat_lover

Reputation: 93

React Infinite scrolling with using API

I would like to show each 10 data with infinite scrolling by using yts API. It shows that I can show data by this code https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10' and it has limit between 1 - 50, but I want to show data infinitely. It seems has page Parameter.. Do you guys have Idea of how can I show data infinitely?

this is the link of yts API https://yts.am/api#list_movies enter image description here

this is my code of call API

_getMovies = async()=>{
 const movies = await this._callApi() 
 this.setState({
   movies 
 })
}

  _callApi=()=>{
    return   fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10')
    .then(potato=> potato.json()) 
    .then(json=> json.data.movies)
    .catch(err=>console.log(err))
    }

Upvotes: 1

Views: 543

Answers (1)

Krishna Satwaji Khandagale
Krishna Satwaji Khandagale

Reputation: 2260

The basic idea behind infinite scoll is get the N number of records from API. That N depends on your screen height, so you will have some height to your each item in your list so divide available screenHeight/ height of each item. Now it will give you some number in N , now take few extra records like 4-5 so that you will have scroll and now check if scrollTop exceeds the scrollHeight property. and when it goes again the call for next page. Thats it, that's how it works.

Upvotes: 2

Related Questions