react-blazing-infinity-scroll

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

React component that supports infinity scroll aiming blazing speed with tiny size (< 10kb 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-blazing-infinity-scroll.js"></script>

How to install

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

$ npm install -S react-blazing-infinity-scroll

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.