[React] Infinite Scrolling with react-intersection-observer

I came across an occasion where users want to see more content as they scroll down the page. Let’s see how this can be implemented and tested using intersection observer.

At first, I implemented using Intersection Observer API. However, it was not trivial to write valid tests. So I looked into react-intersection-observer as a technical spike.

Installation

$ npm install --save react-intersection-observer

Implementation

Test Code

CodeSandbox Demo:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store