react-intersection-observing-infinity-scroll

| | | | --- | --- | --- | --- | --- | ✔ | ✔ | 9+ ✔ | ✔ | ✔ |

example page

React component that supports infinity scroll with tiny size (< 3kb without gzip)
It supports SSR build and fallback render with <div> element.

This library doesn't use any eventListener for scroll event. Rather than eventListener, It uses [Intersection Obeserver API] (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This is the reason why you need polyfill.

Also, this library is written in TypeScript.

Before install

You should install intersection Observer polyfill.
You can choose all possible ways to install the polyfill, however the polyfill MUST comes before the library script.
I think you can optimize polyfill strategy like Polyfill.io.

example

<!-- Load the polyfill first. -->
<script src="path/to/intersection-observer.js"></script>

<!-- Load all other JavaScript. -->
<script src="react-intersection-observing-infinity-scroll.js"></script>

How to install

IMPORTANT
You should install intersection Observer polyfill to support IE & elder browsers.

$ npm install -S react-intersection-observing-infinity-scroll

How to use

<InfiniteScroll
  loadMoreFunc={loadMore}
  isLoading={isLoading}
  hasMore={!isEnd}
  loaderComponent={<div className="loader">{this.renderLoadingSpinner()}</div>}
>
  {/* list content */}
</InfiniteScroll>

If you want to see detail implementation, visit example page and code.

To Do

• [x] Support server side build for Universal rendering.
• [ ] Support position: fixed user custom loading component.
• [ ] Support Reverse direction infinite scrolling.
• [ ] Hide invisible items with some buffer for the performance enhancement.