Implementing Infinite Scroll With React Js without any plugin

In web development infinite scrolling is a technique that helps loading more contents automatically as the user scrolls down to the bottom.
The infinite Scroll concept has definitely earned the user attraction but i won’t say it has replaced pagination. Both have their own-unique features and uses. Infinite scrolling is very efficient for social medias like facebook and twitter, where as pagination is great for search engines like google.

So now if you have decided to go with infinite scrolling, you can do it in two different ways.

  • You can start from level zero and build it all by yourself, doing all the coding and necessary stuffs. Or,
  • You can simply use a react infinite scroll plugin and do the implementation. If you are willing to go with the second option, Here are the top 10 react infinite scroll plugins you can choose from.

This article is about the first way; i.e. developing infinite scroll without using any plugin or package using react js. The article will describe and as well as provide examples for your ease.

react iscroll without plugin

Infinite Scroll Concept Using React Js

We can make infinite scroll work by listening the scroll event. We can add an event listener to either the parent most div or even to the window object.

Take a look at the following code:

The code above has a simple ul tag; inside which we will bind the fetched items. This tag is surrounded by a div on which we are going to attach an event listener to listen the scroll event.

I hope you are aware of all the tags used here. Aren’t you? Well, some of you may not be familiar with ref! So, ref is used to define the reference to the division (div) or any other html element. By using this reference you can get a hold on that element in react. We have given the reference a name “iScroll” and you can access this div using this.refs.iScroll.

Make sure the height of the div is lesser than the total height of primary showing items else you won’t get the scroll bar. You can set the height to 100% or use the window object instead of our iScroll div to make the scroll at window level.

Now let’s talk about the constructor which will look like this:

There are two properties in the state object here; items and loadingState. The items signifies the number of available items that can be included as lis inside the ul section and the loadingState has been used to show a text loading... when data is being loaded.
As we are just providing a demo, that’s why used a number as items. In real application you will probably hold your actual list of data there.

After that you will create a function that will render all the items:

This function creates a list of li and displays all the items. Again, as it’s a demo, we are displaying using the number. In real apps you need to iterate on your your items array and display the values it contains.

Update the render function now:

Yes, this is just a normal component showing few lis. How it make it infinitely scrollable? Hope you remember we have used a ref named iScroll earlier, this comes into action now.

As you all know react components has a function componentDidMount() which gets called automatically when the template of that component is rendered into the DOM. And I have used the same function to add the event listener for scroll into our div iScroll.
The scrollTop property of the element will find the scroll position and add it with the clientHeight property.
Next, the if condition will check the addition of these two properties is greater or equal to the scroll-bar height or not. If the condition is true the loadMoreItems function will run.

Here is how the function will look:

It is pretty simple, first set the loadingState to true and the loading div will be displayed (as shown in the render function). Next, a setTimeout function is called which will increase the number of items by 10 and again make the loadingState false.
Here the reason we are using setTimeout is to generate a time delay. In real applications you will probably make an ajax call to your server and on the resolution of that you will perform similar thing which is done by the callback of our setTimeout.

The entire code

Hope you are clear with the whole concept and left with no doubts, still if there are few, you can comment below. We will definitely get back to you.

About This Author

Exploring the web. In love with javascript & frontend development. Creative & Poorophobic.

  • digster

    how to use window as a container to do the same?