Add useIntersectionObserver prop

Author: Aljullu

src/components/LazyLoadComponent.jsx

@@ -45,10 +45,14 @@ class LazyLoadComponent extends React.Component {
       return this.props.children;
     }
 
-    const { className, delayMethod, delayTime, height, placeholder,
-      scrollPosition, style, threshold, width } = this.props;
-
-    if (this.isScrollTracked || isIntersectionObserverAvailable()) {
+    const { className, delayMethod, delayTime, height,
+      placeholder, scrollPosition, style, threshold,
+      useIntersectionObserver, width } = this.props;
+
+    if (
+      this.isScrollTracked ||
+      (useIntersectionObserver && isIntersectionObserverAvailable())
+    ) {
       return (
         <PlaceholderWithoutTracking
           className={className}
@@ -80,12 +84,14 @@ class LazyLoadComponent extends React.Component {
 LazyLoadComponent.propTypes = {
   afterLoad: PropTypes.func,
   beforeLoad: PropTypes.func,
+  useIntersectionObserver: PropTypes.bool,
   visibleByDefault: PropTypes.bool,
 };
 
 LazyLoadComponent.defaultProps = {
   afterLoad: () => ({}),
   beforeLoad: () => ({}),
+  useIntersectionObserver: true,
   visibleByDefault: false,
 };
 

src/components/LazyLoadImage.jsx

@@ -37,7 +37,7 @@ class LazyLoadImage extends React.Component {
   getLazyLoadImage(image) {
     const { beforeLoad, className, delayMethod, delayTime,
       height, placeholder, scrollPosition, style, threshold,
-      visibleByDefault, width } = this.props;
+      useIntersectionObserver, visibleByDefault, width } = this.props;
 
     return (
       <LazyLoadComponent
@@ -50,6 +50,7 @@ class LazyLoadImage extends React.Component {
         scrollPosition={scrollPosition}
         style={style}
         threshold={threshold}
+        useIntersectionObserver={useIntersectionObserver}
         visibleByDefault={visibleByDefault}
         width={width}>
         {image}
@@ -107,6 +108,7 @@ LazyLoadImage.propTypes = {
   effect: PropTypes.string,
   placeholderSrc: PropTypes.string,
   threshold: PropTypes.number,
+  useIntersectionObserver: PropTypes.bool,
   visibleByDefault: PropTypes.bool,
   wrapperClassName: PropTypes.string,
 };
@@ -119,6 +121,7 @@ LazyLoadImage.defaultProps = {
   effect: '',
   placeholderSrc: '',
   threshold: 100,
+  useIntersectionObserver: true,
   visibleByDefault: false,
   wrapperClassName: '',
 };

src/hoc/trackWindowScroll.js

@@ -16,7 +16,9 @@ const trackWindowScroll = (BaseComponent) => {
     constructor(props) {
       super(props);
 
-      if (isIntersectionObserverAvailable()) {
+      this.useIntersectionObserver =
+        props.useIntersectionObserver && isIntersectionObserverAvailable();
+      if (this.useIntersectionObserver) {
         return;
       }
 
@@ -47,7 +49,7 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     componentDidUpdate() {
-      if (typeof window === 'undefined' || isIntersectionObserverAvailable()) {
+      if (typeof window === 'undefined' || this.useIntersectionObserver) {
         return;
       }
 
@@ -62,7 +64,7 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     addListeners() {
-      if (typeof window === 'undefined' || isIntersectionObserverAvailable()) {
+      if (typeof window === 'undefined' || this.useIntersectionObserver) {
         return;
       }
 
@@ -91,7 +93,7 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     removeListeners() {
-      if (typeof window == 'undefined' || isIntersectionObserverAvailable()) {
+      if (typeof window == 'undefined' || this.useIntersectionObserver) {
         return;
       }
 
@@ -104,7 +106,7 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     onChangeScroll() {
-      if (isIntersectionObserverAvailable()) {
+      if (this.useIntersectionObserver) {
         return;
       }
 
@@ -118,7 +120,7 @@ const trackWindowScroll = (BaseComponent) => {
 
     render() {
       const { delayMethod, delayTime, ...props } = this.props;
-      const scrollPosition = isIntersectionObserverAvailable() ?
+      const scrollPosition = this.useIntersectionObserver ?
         null : this.state.scrollPosition;
 
       return (
@@ -133,11 +135,13 @@ const trackWindowScroll = (BaseComponent) => {
   ScrollAwareComponent.propTypes = {
     delayMethod: PropTypes.oneOf(['debounce', 'throttle']),
     delayTime: PropTypes.number,
+    useIntersectionObserver: PropTypes.bool,
   };
 
   ScrollAwareComponent.defaultProps = {
     delayMethod: 'throttle',
     delayTime: 300,
+    useIntersectionObserver: true,
   };
 
   return ScrollAwareComponent;