Support threshold with units. e.g 100px, 80%...

Author: vladik7244

app/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import throttle from './utils/throttle';
+import throttle from "./utils/throttle";
+import { ThresholdUnits, parseThreshold } from "./utils/threshold";
 
 export default class InfiniteScroll extends Component {
   constructor(props) {
@@ -161,8 +162,16 @@ export default class InfiniteScroll extends Component {
         ? window.screen.availHeight
         : target.clientHeight;
 
+    const threshold = parseThreshold(scrollThreshold);
+
+    if (threshold.unit === ThresholdUnits.Pixel) {
+      return (
+        target.scrollTop + clientHeight >= target.scrollHeight - threshold.value
+      );
+    }
+
     return (
-      target.scrollTop + clientHeight >= scrollThreshold * target.scrollHeight
+      target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight
     );
   }
 
@@ -263,7 +272,7 @@ InfiniteScroll.propTypes = {
   hasMore: PropTypes.bool,
   children: PropTypes.node,
   loader: PropTypes.node.isRequired,
-  scrollThreshold: PropTypes.number,
+  scrollThreshold: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   endMessage: PropTypes.node,
   style: PropTypes.object,
   height: PropTypes.number,

app/utils/threshold.js

@@ -0,0 +1,42 @@
+export const ThresholdUnits = {
+  Pixel: 'Pixel',
+  Percent: 'Percent',
+};
+
+const defaultThreshold = {
+  unit: ThresholdUnits.Percent,
+  value: 0.8,
+};
+
+export function parseThreshold(scrollThreshold) {
+  if (typeof scrollThreshold === "number") {
+    return {
+      unit: ThresholdUnits.Percent,
+      value: scrollThreshold * 100,
+    };
+  }
+
+  if (typeof scrollThreshold === "string") {
+    if (scrollThreshold.match(/^(\d*(.\d+)?)px$/)) {
+      return {
+        unit: ThresholdUnits.Pixel,
+        value: parseFloat(scrollThreshold),
+      };
+    }
+
+    if (scrollThreshold.match(/^(\d*(.\d+)?)%$/)) {
+      return {
+        unit: ThresholdUnits.Percent,
+        value: parseFloat(scrollThreshold),
+      };
+    }
+
+    console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...');
+
+    return defaultThreshold;
+  }
+
+  console.warn('scrollThreshold should be string or number');
+
+  return defaultThreshold;
+}