For my final project with the FlatIron School, I developed Osiris, an app where users can sign up and post listings of pre-loved possessions that they want to re-home, rather than dispose of.
I constructed the frontend of this project using React and Redux and the backend with Ruby on Rails.
As part of this project, I wanted to challenge myself to code my own infinite scrolling component which would render new listings as a user scrolled through the listing index page.
By taking you through the variables and functions required I will cover how I achieved this; and how you can replicate the feature yourself.

Where to start?

When utilising an infinite scrolling feature, you are going to need an infinite (well not quite infinite) collection of items to scroll through. There are many APIs available online to chose from, but for this project, I used my own API that I ran on a Rails server.

An important note is that the API being used must have a way to return information in “pages” of data based on a page number supplied to it.

With an API sourced, we must now consider where to store the returned information.


Just Keep Scrolling, Scrolling, Scrolling.
1.65 GEEK