Implementing Infinite Scroll With React 0.12 , 0.13

Recent­ly for my one appli­ca­tion i need­ed to imple­ment Infi­nite Scrolling, Appli­ca­tion was built using React 0.13, First­ly i searched for pack­ages and went through var­i­ous pack­ages on github but all were out­dat­ed and was not sup­port­ing React 0.13, So i cre­at­ed my own and doing that was very easy :p . So here is what i did -

Attach a event lis­ten­er :  In my react com­po­nent (Com­mentList ) on init state i attached a scroll event lis­ten­er which trig­gers a func­tion which was in my class -

So now myge­tIni­tial­State() looks as fol­low -

so when­ev­er user is scrolling this “han­dle­Scroll” func­tion is being called. and here is that han­dle­Scroll func­tion -

So basi­cal­ly this han­dle­Scroll func­tion is check­ing the cur­rent height of user call­ing the get­Com­ment Func­tion if user reach­es bot­tom (and if no pre­vi­ous request sent , check­ing that by load­ingFlag).

In this exam­ple i am stor­ing the com­mentList in state so on ini­tial­ize state i am set­ting com­ments to a blank array and then on com­ponet­Did­Mount i am call­ing the get­Com­ment, the get­Com­ment is basi­cal­ly set­ting the state(comment) by append­ing the fetched com­ment list. here is that func­tion -

Now you can sim­ply ren­der this comentList in your view.

Demo     |   View Source On GitHub

vivek

Web Developer & Server Admin, Skilled in Java , PHP , LAMP, Tomcat, Mongo DB & SQL. Available for freelancing project or Open Source Contribution, Feel free to contact me at contact@viveksoni.net .

You may also like...

  • IMO, componentDidMount is a bet­ter place for bind­ing events. And, also the event should be removed in componentWillUnmount.

  • Hi there! You might be inter­est­ed in check­ing out react-way­point, which calls a call­back when you scroll to an ele­ment. https://github.com/brigade/react-waypoint

    This can be used to imple­ment infi­nite scroll. I’d love to hear what you think about our approach. http://brigade.github.io/react-waypoint/#infinite-scroll

  • Shaik Irfan

    Iam doing a project on com­ment box­es which includes serv­er API calls, from where i get the com­ments. So, Please help me out to use this infi­nite scroll with­out any php.

    • can you explain more ?

      • Shaik Irfan

        Iam doing a reac­tJs project(like com­ment box in face­book) in which i receive the com­ments from the serv­er estab­lished local­ly. Iam receiv­ing a data of around 100 com­ments in an object from the serv­er. I want to use that object and dis­play them using infi­nite scrolling with­out any use of php in my project.

        • Ok, you mean to say you have loaded 100 Com­ments from the serv­er one time and then you want to do this infi­nite scroll pag­i­na­tion.

          for this you need to mod­i­fy get­Com­ment method, such as -

          getComment:function(){

          //method to fetch com­ments will con­cat result to state.comment

          var nextPage = this.state.page+1; //increase the page count

          var start = this.state.page*10;

          var end = nextPage*10;

          if (this.isMounted()) {

          this.setState({

          com­ments: this.state.comments.concat(yourMainCommentObject.slice(start, end)), //concating to exist­ing com­ments

          loadingFlag:false,

          page:nextPage

          });

          }

          },

          Maybe some­thing like this

          • Shaik Irfan

            I think removeEventListener’s absence will be a loophole.When will you add it?

          • Indra­jeet Mishra

            @vivek00x:disqus, i am try­ing to imple­ment infi­nite scroll to rails app, when call getIni­tail­State for window.eventListiner(‘scroll’, this.handleScroll) it gives error this.state is null..
            please help

          • Shaik Irfan

            Wait­ing for ur reply broth­er.

  • Dhi­roo Ver­ma

    how to imple­ment it with­out php file. with json or fire­base