lazy-react 3.0.0 → 3.1.0

package/README.md

@@ -7,9 +7,9 @@ Utility components to lazy load images, images-as-background and iframes using o
 
 ## Install
 
-`npm install --save lazy-react`  
+`npm install --save lazy-react`
 
-Also available as umd on [unpkg](https://unpkg.com/lazy-react) 
+Also available as umd on [unpkg](https://unpkg.com/lazy-react)
 
 `<script src="https://unpkg.com/lazy-react"></script>`
 
@@ -19,11 +19,12 @@ You can see a demo of those packages in my [personal site](http://jonathanobino.
 
 ## Usage
 
-The package exports 3 components:
+The package exports 4 components:
 
 - LazyBackgroundImage
 - LazyImage
 - LazyFrame
+- LazyComponent
 
 Every component accepts **offeset** as a prop, with 100px as fallback.
 
@@ -46,6 +47,17 @@ Name | Type | Description | Required | Default
 className  | String | html class attribute |  | empty string
 style  | Object | html style attribute |  | {} |
 
+This component is used to have a div placeholder before loading the component.
+
+Usage:
+```javascript
+
+<LazyComponent>
+	<ComponentToLoadWhenInViewport>
+</LazyComponent>
+
+```
+
 ### LazyImage
 
 #### Props
@@ -79,11 +91,12 @@ style  | Object | html style attribute |  | {width:'100%'}
 
 ```javascript
 //with es6
-import {LazyBackgroundImage, LazyImage, LazyFrame} from 'lazy-react'
+import {LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent} from 'lazy-react'
 //with es5
 var LazyBackgroundImage = require('lazy-react').LazyBackgroundImage
 var LazyImage = require('lazy-react').LazyImage
 var LazyFrame = require('lazy-react').LazyFrame
+var LazyComponent = require('lazy-react').LazyComponent
 
 class Example extends React.Component {
 	constructor(props) {
@@ -91,18 +104,21 @@ class Example extends React.Component {
 	}
 	render() {
 		return <div>
-			<LazyBackgroundImage 
-				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'} 
+			<LazyBackgroundImage
+				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
 				className="fill"
 			/>
-			<LazyImage 
-				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'} 
+			<LazyImage
+				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
 				offset={100}
 			/>
-			<LazyFrame 
-				link={'http://jonathanobino.xyz'} 
+			<LazyFrame
+				link={'http://jonathanobino.xyz'}
 				scrolling={true}
 			/>
+			<LazyComponent>
+				<ComponentToLoadWhenInViewport>
+			</LazyComponent>
 		</div>
 	}
 }

package/demo/index.js

@@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
   \***********************/
 /***/ ((module, exports, __webpack_require__) => {
 
-eval("/* module decorator */ module = __webpack_require__.nmd(module);\nvar __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\n!function (e, t) {\n  \"object\" == ( false ? 0 : _typeof(exports)) && \"object\" == ( false ? 0 : _typeof(module)) ? module.exports = t(__webpack_require__(/*! react */ \"./node_modules/react/index.js\")) :  true ? !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(/*! react */ \"./node_modules/react/index.js\")], __WEBPACK_AMD_DEFINE_FACTORY__ = (t),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : 0;\n}(self, function (e) {\n  return function () {\n    \"use strict\";\n\n    var t = {\n      787: function _(t) {\n        t.exports = e;\n      }\n    },\n        r = {};\n\n    function n(e) {\n      var o = r[e];\n      if (void 0 !== o) return o.exports;\n      var l = r[e] = {\n        exports: {}\n      };\n      return t[e](l, l.exports, n), l.exports;\n    }\n\n    n.n = function (e) {\n      var t = e && e.__esModule ? function () {\n        return e[\"default\"];\n      } : function () {\n        return e;\n      };\n      return n.d(t, {\n        a: t\n      }), t;\n    }, n.d = function (e, t) {\n      for (var r in t) {\n        n.o(t, r) && !n.o(e, r) && Object.defineProperty(e, r, {\n          enumerable: !0,\n          get: t[r]\n        });\n      }\n    }, n.o = function (e, t) {\n      return Object.prototype.hasOwnProperty.call(e, t);\n    }, n.r = function (e) {\n      \"undefined\" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {\n        value: \"Module\"\n      }), Object.defineProperty(e, \"__esModule\", {\n        value: !0\n      });\n    };\n    var o = {};\n    return function () {\n      n.r(o), n.d(o, {\n        LazyBackgroundImage: function LazyBackgroundImage() {\n          return u;\n        },\n        LazyComponent: function LazyComponent() {\n          return f;\n        },\n        LazyFrame: function LazyFrame() {\n          return s;\n        },\n        LazyImage: function LazyImage() {\n          return c;\n        }\n      });\n      var e = n(787),\n          t = n.n(e);\n\n      function r(e, t) {\n        (null == t || t > e.length) && (t = e.length);\n\n        for (var r = 0, n = new Array(t); r < t; r++) {\n          n[r] = e[r];\n        }\n\n        return n;\n      }\n\n      function l(t, n) {\n        var o,\n            l,\n            a = (o = (0, e.useState)({\n          link: \"\",\n          visible: !1\n        }), l = 2, function (e) {\n          if (Array.isArray(e)) return e;\n        }(o) || function (e, t) {\n          var r = null == e ? null : \"undefined\" != typeof Symbol && e[Symbol.iterator] || e[\"@@iterator\"];\n\n          if (null != r) {\n            var n,\n                o,\n                l = [],\n                i = !0,\n                a = !1;\n\n            try {\n              for (r = r.call(e); !(i = (n = r.next()).done) && (l.push(n.value), !t || l.length !== t); i = !0) {\n                ;\n              }\n            } catch (e) {\n              a = !0, o = e;\n            } finally {\n              try {\n                i || null == r[\"return\"] || r[\"return\"]();\n              } finally {\n                if (a) throw o;\n              }\n            }\n\n            return l;\n          }\n        }(o, l) || function (e, t) {\n          if (e) {\n            if (\"string\" == typeof e) return r(e, t);\n            var n = Object.prototype.toString.call(e).slice(8, -1);\n            return \"Object\" === n && e.constructor && (n = e.constructor.name), \"Map\" === n || \"Set\" === n ? Array.from(e) : \"Arguments\" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? r(e, t) : void 0;\n          }\n        }(o, l) || function () {\n          throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n        }()),\n            u = a[0],\n            c = a[1];\n\n        function s() {\n          c({\n            visible: !0,\n            link: n.link\n          });\n        }\n\n        return (0, e.useEffect)(function () {\n          return void 0 !== t.current && i.addElement({\n            element: t.current,\n            props: n,\n            makeItVisible: s\n          }), function () {\n            return i.removeElementFromList({\n              element: t.current,\n              props: n,\n              makeItVisible: s\n            });\n          };\n        }, []), u;\n      }\n\n      var i = {\n        elements: []\n      };\n\n      function a(e, t) {\n        (null == t || t > e.length) && (t = e.length);\n\n        for (var r = 0, n = new Array(t); r < t; r++) {\n          n[r] = e[r];\n        }\n\n        return n;\n      }\n\n      function u(r) {\n        var n,\n            o,\n            i = (0, e.useRef)(),\n            u = l(i, r),\n            c = (n = (0, e.useState)(Object.assign({\n          backgroundImage: \"url(\".concat(u.link, \")\")\n        }, r.style)), o = 2, function (e) {\n          if (Array.isArray(e)) return e;\n        }(n) || function (e, t) {\n          var r = null == e ? null : \"undefined\" != typeof Symbol && e[Symbol.iterator] || e[\"@@iterator\"];\n\n          if (null != r) {\n            var n,\n                o,\n                l = [],\n                i = !0,\n                a = !1;\n\n            try {\n              for (r = r.call(e); !(i = (n = r.next()).done) && (l.push(n.value), !t || l.length !== t); i = !0) {\n                ;\n              }\n            } catch (e) {\n              a = !0, o = e;\n            } finally {\n              try {\n                i || null == r[\"return\"] || r[\"return\"]();\n              } finally {\n                if (a) throw o;\n              }\n            }\n\n            return l;\n          }\n        }(n, o) || function (e, t) {\n          if (e) {\n            if (\"string\" == typeof e) return a(e, t);\n            var r = Object.prototype.toString.call(e).slice(8, -1);\n            return \"Object\" === r && e.constructor && (r = e.constructor.name), \"Map\" === r || \"Set\" === r ? Array.from(e) : \"Arguments\" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? a(e, t) : void 0;\n          }\n        }(n, o) || function () {\n          throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n        }()),\n            s = c[0],\n            f = c[1];\n        return (0, e.useEffect)(function () {\n          f(Object.assign({\n            backgroundImage: \"url(\".concat(u.link, \")\")\n          }, r.style));\n        }, [u]), t().createElement(\"div\", {\n          className: r.className,\n          style: s,\n          ref: i\n        });\n      }\n\n      function c(r) {\n        var n = (0, e.useRef)(),\n            o = l(n, r);\n        return t().createElement(\"img\", {\n          src: o.link,\n          alt: r.alt,\n          style: r.style,\n          className: r.className,\n          ref: n\n        });\n      }\n\n      function s(r) {\n        var n = (0, e.useRef)(),\n            o = l(n, r);\n        return t().createElement(\"iframe\", {\n          height: r.height || \"500\",\n          scrolling: r.scrolling || \"no\",\n          src: o.link,\n          frameBorder: r.frameBorder || \"no\",\n          allowtransparency: r.allowTransparency || \"true\",\n          allowFullScreen: r.allowFullScreen || !0,\n          style: r.style || {},\n          ref: n\n        });\n      }\n\n      function f(r) {\n        var n = (0, e.useRef)(),\n            o = l(n, r),\n            i = t().createElement(\"div\", {\n          style: r.style ? r.style : {\n            heigt: \"300px\",\n            width: \"300px\"\n          }\n        });\n        return t().createElement(\"div\", {\n          ref: n\n        }, o.visible ? r.children : i);\n      }\n\n      i.isInViewPort = function (e) {\n        var t = e.offset,\n            r = e.top,\n            n = e.left;\n        return window.scrollY + window.innerHeight + t > r && window.scrollX + window.innerWidth + t > n;\n      }, i.calculateNewPosition = function (e) {\n        var t = e.element.getBoundingClientRect(),\n            r = t.top,\n            n = t.left,\n            o = t.right;\n        return Object.assign({}, e, {\n          top: r,\n          left: n,\n          right: o\n        });\n      }, i.addElement = function (e) {\n        var t = e.element,\n            r = e.props,\n            n = e.makeItVisible,\n            o = t.getBoundingClientRect(),\n            l = o.top,\n            a = o.left,\n            u = o.right;\n        i.elements.push({\n          element: t,\n          top: l,\n          left: a,\n          right: u,\n          offset: r.offset || 100,\n          makeItVisible: n\n        }), \"function\" != typeof i.isListenerAttached && (i.isListenerAttached = window.requestAnimationFrame(i.eventHandler));\n      }, i.eventHandler = function () {\n        if (0 === i.elements.length) i.removeScrollHandler();else {\n          for (var e = [], t = 0; t < i.elements.length; t++) {\n            i.isInViewPort(i.elements[t]) && (e.push(t), i.elements[t].makeItVisible());\n          }\n\n          e.length > 0 && (i.elements = i.elements.filter(function (t, r) {\n            return !e.includes(r);\n          })), i.elements = i.elements.map(function (e) {\n            return i.calculateNewPosition(e);\n          }), i.isListenerAttached = window.requestAnimationFrame(i.eventHandler);\n        }\n      }, i.removeScrollHandler = function () {\n        window.cancelAnimationFrame(i.isListenerAttached);\n      }, i.removeElementFromList = function (e) {\n        i.elements = i.elements.filter(function (t) {\n          return t !== e;\n        });\n      }, i.isListenerAttached = !1;\n    }(), o;\n  }();\n});\n\n//# sourceURL=webpack://lazy-react/./dist/index.js?");
+eval("/* module decorator */ module = __webpack_require__.nmd(module);\nvar __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\n!function (e, t) {\n  \"object\" == ( false ? 0 : _typeof(exports)) && \"object\" == ( false ? 0 : _typeof(module)) ? module.exports = t(__webpack_require__(/*! react */ \"./node_modules/react/index.js\")) :  true ? !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(/*! react */ \"./node_modules/react/index.js\")], __WEBPACK_AMD_DEFINE_FACTORY__ = (t),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : 0;\n}(self, function (e) {\n  return function () {\n    \"use strict\";\n\n    var t = {\n      787: function _(t) {\n        t.exports = e;\n      }\n    },\n        r = {};\n\n    function n(e) {\n      var o = r[e];\n      if (void 0 !== o) return o.exports;\n      var l = r[e] = {\n        exports: {}\n      };\n      return t[e](l, l.exports, n), l.exports;\n    }\n\n    n.n = function (e) {\n      var t = e && e.__esModule ? function () {\n        return e[\"default\"];\n      } : function () {\n        return e;\n      };\n      return n.d(t, {\n        a: t\n      }), t;\n    }, n.d = function (e, t) {\n      for (var r in t) {\n        n.o(t, r) && !n.o(e, r) && Object.defineProperty(e, r, {\n          enumerable: !0,\n          get: t[r]\n        });\n      }\n    }, n.o = function (e, t) {\n      return Object.prototype.hasOwnProperty.call(e, t);\n    }, n.r = function (e) {\n      \"undefined\" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {\n        value: \"Module\"\n      }), Object.defineProperty(e, \"__esModule\", {\n        value: !0\n      });\n    };\n    var o = {};\n    return function () {\n      n.r(o), n.d(o, {\n        LazyBackgroundImage: function LazyBackgroundImage() {\n          return u;\n        },\n        LazyComponent: function LazyComponent() {\n          return f;\n        },\n        LazyFrame: function LazyFrame() {\n          return s;\n        },\n        LazyImage: function LazyImage() {\n          return c;\n        }\n      });\n      var e = n(787),\n          t = n.n(e);\n\n      function r(e, t) {\n        (null == t || t > e.length) && (t = e.length);\n\n        for (var r = 0, n = new Array(t); r < t; r++) {\n          n[r] = e[r];\n        }\n\n        return n;\n      }\n\n      function l(t, n) {\n        var o,\n            l,\n            a = (o = (0, e.useState)({\n          link: \"\",\n          visible: !1\n        }), l = 2, function (e) {\n          if (Array.isArray(e)) return e;\n        }(o) || function (e, t) {\n          var r = null == e ? null : \"undefined\" != typeof Symbol && e[Symbol.iterator] || e[\"@@iterator\"];\n\n          if (null != r) {\n            var n,\n                o,\n                l = [],\n                i = !0,\n                a = !1;\n\n            try {\n              for (r = r.call(e); !(i = (n = r.next()).done) && (l.push(n.value), !t || l.length !== t); i = !0) {\n                ;\n              }\n            } catch (e) {\n              a = !0, o = e;\n            } finally {\n              try {\n                i || null == r[\"return\"] || r[\"return\"]();\n              } finally {\n                if (a) throw o;\n              }\n            }\n\n            return l;\n          }\n        }(o, l) || function (e, t) {\n          if (e) {\n            if (\"string\" == typeof e) return r(e, t);\n            var n = Object.prototype.toString.call(e).slice(8, -1);\n            return \"Object\" === n && e.constructor && (n = e.constructor.name), \"Map\" === n || \"Set\" === n ? Array.from(e) : \"Arguments\" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? r(e, t) : void 0;\n          }\n        }(o, l) || function () {\n          throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n        }()),\n            u = a[0],\n            c = a[1];\n\n        function s() {\n          c({\n            visible: !0,\n            link: n.link\n          });\n        }\n\n        return (0, e.useEffect)(function () {\n          return void 0 !== t.current && i.addElement({\n            element: t.current,\n            props: n,\n            makeItVisible: s\n          }), function () {\n            return i.removeElementFromList({\n              element: t.current,\n              props: n,\n              makeItVisible: s\n            });\n          };\n        }, []), u;\n      }\n\n      var i = {\n        elements: []\n      };\n\n      function a(e, t) {\n        (null == t || t > e.length) && (t = e.length);\n\n        for (var r = 0, n = new Array(t); r < t; r++) {\n          n[r] = e[r];\n        }\n\n        return n;\n      }\n\n      function u(r) {\n        var n,\n            o,\n            i = (0, e.useRef)(),\n            u = l(i, r),\n            c = (n = (0, e.useState)(Object.assign({\n          backgroundImage: \"url(\".concat(u.link, \")\")\n        }, r.style)), o = 2, function (e) {\n          if (Array.isArray(e)) return e;\n        }(n) || function (e, t) {\n          var r = null == e ? null : \"undefined\" != typeof Symbol && e[Symbol.iterator] || e[\"@@iterator\"];\n\n          if (null != r) {\n            var n,\n                o,\n                l = [],\n                i = !0,\n                a = !1;\n\n            try {\n              for (r = r.call(e); !(i = (n = r.next()).done) && (l.push(n.value), !t || l.length !== t); i = !0) {\n                ;\n              }\n            } catch (e) {\n              a = !0, o = e;\n            } finally {\n              try {\n                i || null == r[\"return\"] || r[\"return\"]();\n              } finally {\n                if (a) throw o;\n              }\n            }\n\n            return l;\n          }\n        }(n, o) || function (e, t) {\n          if (e) {\n            if (\"string\" == typeof e) return a(e, t);\n            var r = Object.prototype.toString.call(e).slice(8, -1);\n            return \"Object\" === r && e.constructor && (r = e.constructor.name), \"Map\" === r || \"Set\" === r ? Array.from(e) : \"Arguments\" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? a(e, t) : void 0;\n          }\n        }(n, o) || function () {\n          throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n        }()),\n            s = c[0],\n            f = c[1];\n        return (0, e.useEffect)(function () {\n          f(Object.assign({\n            backgroundImage: \"url(\".concat(u.link, \")\")\n          }, r.style));\n        }, [u]), t().createElement(\"div\", {\n          className: r.className,\n          style: s,\n          ref: i\n        }, r.children);\n      }\n\n      function c(r) {\n        var n = (0, e.useRef)(),\n            o = l(n, r);\n        return t().createElement(\"img\", {\n          src: o.link,\n          alt: r.alt,\n          style: r.style,\n          className: r.className,\n          ref: n\n        });\n      }\n\n      function s(r) {\n        var n = (0, e.useRef)(),\n            o = l(n, r);\n        return t().createElement(\"iframe\", {\n          height: r.height || \"500\",\n          scrolling: r.scrolling || \"no\",\n          src: o.link,\n          frameBorder: r.frameBorder || \"no\",\n          allowtransparency: r.allowTransparency || \"true\",\n          allowFullScreen: r.allowFullScreen || !0,\n          style: r.style || {},\n          ref: n\n        });\n      }\n\n      function f(r) {\n        var n = (0, e.useRef)(),\n            o = l(n, r),\n            i = t().createElement(\"div\", {\n          style: r.style ? r.style : {\n            heigt: \"300px\",\n            width: \"300px\"\n          }\n        });\n        return t().createElement(\"div\", {\n          ref: n\n        }, o.visible ? r.children : i);\n      }\n\n      i.isInViewPort = function (e) {\n        var t = e.offset,\n            r = e.top,\n            n = e.left;\n        return window.scrollY + window.innerHeight + t > r && window.scrollX + window.innerWidth + t > n;\n      }, i.calculateNewPosition = function (e) {\n        var t = e.element.getBoundingClientRect(),\n            r = t.top,\n            n = t.left,\n            o = t.right;\n        return Object.assign({}, e, {\n          top: r,\n          left: n,\n          right: o\n        });\n      }, i.addElement = function (e) {\n        var t = e.element,\n            r = e.props,\n            n = e.makeItVisible,\n            o = t.getBoundingClientRect(),\n            l = o.top,\n            a = o.left,\n            u = o.right;\n        i.elements.push({\n          element: t,\n          top: l,\n          left: a,\n          right: u,\n          offset: r.offset || 100,\n          makeItVisible: n\n        }), \"boolean\" == typeof i.isListenerAttached && (i.isListenerAttached = window.requestAnimationFrame(i.eventHandler));\n      }, i.eventHandler = function () {\n        0 === i.elements.length ? i.removeScrollHandler() : (i.elements.forEach(function (e, t) {\n          i.isInViewPort(e) ? (e.makeItVisible(), i.removeElementFromList(e)) : i.elements[t] = i.calculateNewPosition(e);\n        }), i.isListenerAttached = window.requestAnimationFrame(i.eventHandler));\n      }, i.removeScrollHandler = function () {\n        window.cancelAnimationFrame(i.isListenerAttached);\n      }, i.removeElementFromList = function (e) {\n        i.elements = i.elements.filter(function (t) {\n          return t !== e;\n        });\n      }, i.isListenerAttached = !1;\n    }(), o;\n  }();\n});\n\n//# sourceURL=webpack://lazy-react/./dist/index.js?");
 
 /***/ }),
 

package/dist/index.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.LazyReact=t(require("react")):e.LazyReact=t(e.React)}(self,(function(e){return(()=>{"use strict";var t={787:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var l=r[e]={exports:{}};return t[e](l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{LazyBackgroundImage:()=>u,LazyComponent:()=>f,LazyFrame:()=>s,LazyImage:()=>c});var e=n(787),t=n.n(e);function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function l(t,n){var o,l,a=(o=(0,e.useState)({link:"",visible:!1}),l=2,function(e){if(Array.isArray(e))return e}(o)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l=[],i=!0,a=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(a)throw o}}return l}}(o,l)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(o,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=a[0],c=a[1];function s(){c({visible:!0,link:n.link})}return(0,e.useEffect)((function(){return void 0!==t.current&&i.addElement({element:t.current,props:n,makeItVisible:s}),function(){return i.removeElementFromList({element:t.current,props:n,makeItVisible:s})}}),[]),u}var i={elements:[]};function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function u(r){var n,o,i=(0,e.useRef)(),u=l(i,r),c=(n=(0,e.useState)(Object.assign({backgroundImage:"url(".concat(u.link,")")},r.style)),o=2,function(e){if(Array.isArray(e))return e}(n)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l=[],i=!0,a=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(a)throw o}}return l}}(n,o)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(e,t):void 0}}(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),s=c[0],f=c[1];return(0,e.useEffect)((function(){f(Object.assign({backgroundImage:"url(".concat(u.link,")")},r.style))}),[u]),t().createElement("div",{className:r.className,style:s,ref:i})}function c(r){var n=(0,e.useRef)(),o=l(n,r);return t().createElement("img",{src:o.link,alt:r.alt,style:r.style,className:r.className,ref:n})}function s(r){var n=(0,e.useRef)(),o=l(n,r);return t().createElement("iframe",{height:r.height||"500",scrolling:r.scrolling||"no",src:o.link,frameBorder:r.frameBorder||"no",allowtransparency:r.allowTransparency||"true",allowFullScreen:r.allowFullScreen||!0,style:r.style||{},ref:n})}function f(r){var n=(0,e.useRef)(),o=l(n,r),i=t().createElement("div",{style:r.style?r.style:{heigt:"300px",width:"300px"}});return t().createElement("div",{ref:n},o.visible?r.children:i)}i.isInViewPort=function(e){var t=e.offset,r=e.top,n=e.left;return window.scrollY+window.innerHeight+t>r&&window.scrollX+window.innerWidth+t>n},i.calculateNewPosition=function(e){var t=e.element.getBoundingClientRect(),r=t.top,n=t.left,o=t.right;return Object.assign({},e,{top:r,left:n,right:o})},i.addElement=function(e){var t=e.element,r=e.props,n=e.makeItVisible,o=t.getBoundingClientRect(),l=o.top,a=o.left,u=o.right;i.elements.push({element:t,top:l,left:a,right:u,offset:r.offset||100,makeItVisible:n}),"function"!=typeof i.isListenerAttached&&(i.isListenerAttached=window.requestAnimationFrame(i.eventHandler))},i.eventHandler=function(){if(0===i.elements.length)i.removeScrollHandler();else{for(var e=[],t=0;t<i.elements.length;t++)i.isInViewPort(i.elements[t])&&(e.push(t),i.elements[t].makeItVisible());e.length>0&&(i.elements=i.elements.filter((function(t,r){return!e.includes(r)}))),i.elements=i.elements.map((function(e){return i.calculateNewPosition(e)})),i.isListenerAttached=window.requestAnimationFrame(i.eventHandler)}},i.removeScrollHandler=function(){window.cancelAnimationFrame(i.isListenerAttached)},i.removeElementFromList=function(e){i.elements=i.elements.filter((function(t){return t!==e}))},i.isListenerAttached=!1})(),o})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.LazyReact=t(require("react")):e.LazyReact=t(e.React)}(self,(function(e){return(()=>{"use strict";var t={787:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var l=r[e]={exports:{}};return t[e](l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{LazyBackgroundImage:()=>u,LazyComponent:()=>f,LazyFrame:()=>s,LazyImage:()=>c});var e=n(787),t=n.n(e);function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function l(t,n){var o,l,a=(o=(0,e.useState)({link:"",visible:!1}),l=2,function(e){if(Array.isArray(e))return e}(o)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l=[],i=!0,a=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(a)throw o}}return l}}(o,l)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(o,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=a[0],c=a[1];function s(){c({visible:!0,link:n.link})}return(0,e.useEffect)((function(){return void 0!==t.current&&i.addElement({element:t.current,props:n,makeItVisible:s}),function(){return i.removeElementFromList({element:t.current,props:n,makeItVisible:s})}}),[]),u}var i={elements:[]};function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function u(r){var n,o,i=(0,e.useRef)(),u=l(i,r),c=(n=(0,e.useState)(Object.assign({backgroundImage:"url(".concat(u.link,")")},r.style)),o=2,function(e){if(Array.isArray(e))return e}(n)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l=[],i=!0,a=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(a)throw o}}return l}}(n,o)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(e,t):void 0}}(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),s=c[0],f=c[1];return(0,e.useEffect)((function(){f(Object.assign({backgroundImage:"url(".concat(u.link,")")},r.style))}),[u]),t().createElement("div",{className:r.className,style:s,ref:i},r.children)}function c(r){var n=(0,e.useRef)(),o=l(n,r);return t().createElement("img",{src:o.link,alt:r.alt,style:r.style,className:r.className,ref:n})}function s(r){var n=(0,e.useRef)(),o=l(n,r);return t().createElement("iframe",{height:r.height||"500",scrolling:r.scrolling||"no",src:o.link,frameBorder:r.frameBorder||"no",allowtransparency:r.allowTransparency||"true",allowFullScreen:r.allowFullScreen||!0,style:r.style||{},ref:n})}function f(r){var n=(0,e.useRef)(),o=l(n,r),i=t().createElement("div",{style:r.style?r.style:{heigt:"300px",width:"300px"}});return t().createElement("div",{ref:n},o.visible?r.children:i)}i.isInViewPort=function(e){var t=e.offset,r=e.top,n=e.left;return window.scrollY+window.innerHeight+t>r&&window.scrollX+window.innerWidth+t>n},i.calculateNewPosition=function(e){var t=e.element.getBoundingClientRect(),r=t.top,n=t.left,o=t.right;return Object.assign({},e,{top:r,left:n,right:o})},i.addElement=function(e){var t=e.element,r=e.props,n=e.makeItVisible,o=t.getBoundingClientRect(),l=o.top,a=o.left,u=o.right;i.elements.push({element:t,top:l,left:a,right:u,offset:r.offset||100,makeItVisible:n}),"boolean"==typeof i.isListenerAttached&&(i.isListenerAttached=window.requestAnimationFrame(i.eventHandler))},i.eventHandler=function(){0===i.elements.length?i.removeScrollHandler():(i.elements.forEach((function(e,t){i.isInViewPort(e)?(e.makeItVisible(),i.removeElementFromList(e)):i.elements[t]=i.calculateNewPosition(e)})),i.isListenerAttached=window.requestAnimationFrame(i.eventHandler))},i.removeScrollHandler=function(){window.cancelAnimationFrame(i.isListenerAttached)},i.removeElementFromList=function(e){i.elements=i.elements.filter((function(t){return t!==e}))},i.isListenerAttached=!1})(),o})()}));
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"./dist/index.js","mappings":"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","sources":["webpack://LazyReact/webpack/universalModuleDefinition","webpack://LazyReact/external umd {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}","webpack://LazyReact/webpack/bootstrap","webpack://LazyReact/webpack/runtime/compat get default export","webpack://LazyReact/webpack/runtime/define property getters","webpack://LazyReact/webpack/runtime/hasOwnProperty shorthand","webpack://LazyReact/webpack/runtime/make namespace object","webpack://LazyReact/./src/baseClass.js","webpack://LazyReact/./src/lazyLoadBackgroundImage.js","webpack://LazyReact/./src/lazyLoadImage.js","webpack://LazyReact/./src/lazyLoadFrame.js","webpack://LazyReact/./src/lazyLoadComponent.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"LazyReact\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"LazyReact\"] = factory(root[\"React\"]);\n})(self, function(__WEBPACK_EXTERNAL_MODULE__787__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__787__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars\n\nexport default function useRenderIfInViewPort(element, props) {\n  const [state, setState] = useState({\n    link: '',\n    visible: false,\n  })\n\n  function makeItVisible() {\n    setState({\n      visible: true,\n      link: props.link,\n    })\n  }\n\n  useEffect(() => {\n    if (element.current !== undefined)\n      CheckIfRender.addElement({\n        element: element.current,\n        props,\n        makeItVisible,\n      })\n    return () =>\n      CheckIfRender.removeElementFromList({\n        element: element.current,\n        props,\n        makeItVisible,\n      })\n  }, [])\n\n  return state\n}\n\nconst CheckIfRender = {\n  elements: [],\n}\n\nCheckIfRender.isInViewPort = ({ offset, top, left }) =>\n  window.scrollY + window.innerHeight + offset > top &&\n  window.scrollX + window.innerWidth + offset > left\n\nCheckIfRender.calculateNewPosition = (elem) => {\n  const reference = elem.element\n  const { top, left, right } = reference.getBoundingClientRect()\n  return {\n    ...elem,\n    top,\n    left,\n    right,\n  }\n}\n\nCheckIfRender.addElement = function ({ element, props, makeItVisible }) {\n  //the distance from the pixel 0,0 and the top of the element\n  const { top, left, right } = element.getBoundingClientRect()\n  CheckIfRender.elements.push({\n    element,\n    top,\n    left,\n    right,\n    offset: props.offset || 100,\n    makeItVisible,\n  })\n  //check if has already been started the rAF cycle\n  if (typeof CheckIfRender.isListenerAttached !== 'function') {\n    CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n      CheckIfRender.eventHandler\n    )\n  }\n}\n\nCheckIfRender.eventHandler = function () {\n  //if there is no more element to lazy load just remove the listeners/rAF\n  if (CheckIfRender.elements.length === 0) {\n    CheckIfRender.removeScrollHandler()\n  } else {\n    //save every index of elements that has been loaded\n    let savedIndexs = []\n    for (let i = 0; i < CheckIfRender.elements.length; i++) {\n      if (CheckIfRender.isInViewPort(CheckIfRender.elements[i])) {\n        savedIndexs.push(i)\n        //make the element visible\n        CheckIfRender.elements[i].makeItVisible()\n      }\n    }\n    //remove elements that has already been loaded from the list of the elements\n    if (savedIndexs.length > 0)\n      CheckIfRender.elements = CheckIfRender.elements.filter(\n        (elem, index) => !savedIndexs.includes(index)\n      )\n    //update the coordinates of the elements\n    CheckIfRender.elements = CheckIfRender.elements.map((elem) =>\n      CheckIfRender.calculateNewPosition(elem)\n    )\n    CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n      CheckIfRender.eventHandler\n    )\n  }\n}\n\nCheckIfRender.removeScrollHandler = function () {\n  window.cancelAnimationFrame(CheckIfRender.isListenerAttached)\n}\n\n//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded\nCheckIfRender.removeElementFromList = function (toRemove) {\n  CheckIfRender.elements = CheckIfRender.elements.filter(\n    (elem) => elem !== toRemove\n  )\n}\n\nCheckIfRender.isListenerAttached = false\n\nexport { CheckIfRender }\n","import React, { useState, useEffect, useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyBackgroundImage(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n  const [style, setStyle] = useState({\n    backgroundImage: `url(${isViewable.link})`,\n    ...props.style,\n  })\n\n  useEffect(() => {\n    setStyle({\n      backgroundImage: `url(${isViewable.link})`,\n      ...props.style,\n    })\n  }, [isViewable])\n\n  return <div className={props.className} style={style} ref={ref} />\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyImage(props) {\n  const ref = useRef()\n  const isViewable = useIsInViewPort(ref, props)\n\n  return (\n    <img\n      src={isViewable.link}\n      alt={props.alt}\n      style={props.style}\n      className={props.className}\n      ref={ref}\n    />\n  )\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyFrame(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n\n  return (\n    <iframe\n      height={props.height || '500'}\n      scrolling={props.scrolling || 'no'}\n      src={isViewable.link}\n      frameBorder={props.frameBorder || 'no'}\n      allowtransparency={props.allowTransparency || 'true'}\n      allowFullScreen={props.allowFullScreen || true}\n      style={props.style || {}}\n      ref={ref}\n    />\n  )\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyComponent(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n\n  const placeHolder = (\n    <div\n      style={\n        props.style\n          ? props.style\n          : {\n              heigt: '300px',\n              width: '300px',\n            }\n      }\n    />\n  )\n\n  return (\n    <div ref={ref}>{isViewable.visible ? props.children : placeHolder}</div>\n  )\n}\n"],"names":["root","factory","exports","module","require","define","amd","self","__WEBPACK_EXTERNAL_MODULE__787__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","useRenderIfInViewPort","element","props","useState","link","visible","state","setState","makeItVisible","useEffect","current","CheckIfRender","addElement","removeElementFromList","elements","LazyBackgroundImage","ref","useRef","isViewable","useIsInViewPort","backgroundImage","style","setStyle","className","LazyImage","src","alt","LazyFrame","height","scrolling","frameBorder","allowtransparency","allowTransparency","allowFullScreen","LazyComponent","placeHolder","heigt","width","children","isInViewPort","offset","top","left","window","scrollY","innerHeight","scrollX","innerWidth","calculateNewPosition","elem","getBoundingClientRect","right","push","isListenerAttached","requestAnimationFrame","eventHandler","length","removeScrollHandler","savedIndexs","i","filter","index","includes","map","cancelAnimationFrame","toRemove"],"sourceRoot":""}
+{"version":3,"file":"./dist/index.js","mappings":"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","sources":["webpack://LazyReact/webpack/universalModuleDefinition","webpack://LazyReact/external umd {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}","webpack://LazyReact/webpack/bootstrap","webpack://LazyReact/webpack/runtime/compat get default export","webpack://LazyReact/webpack/runtime/define property getters","webpack://LazyReact/webpack/runtime/hasOwnProperty shorthand","webpack://LazyReact/webpack/runtime/make namespace object","webpack://LazyReact/./src/baseClass.js","webpack://LazyReact/./src/lazyLoadBackgroundImage.js","webpack://LazyReact/./src/lazyLoadImage.js","webpack://LazyReact/./src/lazyLoadFrame.js","webpack://LazyReact/./src/lazyLoadComponent.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"LazyReact\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"LazyReact\"] = factory(root[\"React\"]);\n})(self, function(__WEBPACK_EXTERNAL_MODULE__787__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__787__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars\n\nexport default function useRenderIfInViewPort(element, props) {\n  const [state, setState] = useState({\n    link: '',\n    visible: false,\n  })\n\n  function makeItVisible() {\n    setState({\n      visible: true,\n      link: props.link,\n    })\n  }\n\n  useEffect(() => {\n    if (element.current !== undefined)\n      CheckIfRender.addElement({\n        element: element.current,\n        props,\n        makeItVisible,\n      })\n    return () =>\n      CheckIfRender.removeElementFromList({\n        element: element.current,\n        props,\n        makeItVisible,\n      })\n  }, [])\n\n  return state\n}\n\nconst CheckIfRender = {\n  elements: [],\n}\n\nCheckIfRender.isInViewPort = ({ offset, top, left }) =>\n  window.scrollY + window.innerHeight + offset > top &&\n  window.scrollX + window.innerWidth + offset > left\n\nCheckIfRender.calculateNewPosition = (elem) => {\n  const reference = elem.element\n  const { top, left, right } = reference.getBoundingClientRect()\n  return {\n    ...elem,\n    top,\n    left,\n    right,\n  }\n}\n\nCheckIfRender.addElement = function ({ element, props, makeItVisible }) {\n  //the distance from the pixel 0,0 and the top of the element\n  const { top, left, right } = element.getBoundingClientRect()\n  CheckIfRender.elements.push({\n    element,\n    top,\n    left,\n    right,\n    offset: props.offset || 100,\n    makeItVisible,\n  })\n  //check if has already been started the rAF cycle\n  if (typeof CheckIfRender.isListenerAttached === 'boolean') {\n    CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n      CheckIfRender.eventHandler\n    )\n  }\n}\n\nCheckIfRender.eventHandler = function () {\n  //if there is no more element to lazy load remove the listener/rAF\n  if (CheckIfRender.elements.length === 0) {\n    CheckIfRender.removeScrollHandler()\n  } else {\n    CheckIfRender.elements.forEach((elem, i) => {\n      // if element is in viewPort make it visible\n      if (CheckIfRender.isInViewPort(elem)) {\n        elem.makeItVisible()\n        // remove element from the list of elements to lazy load\n        CheckIfRender.removeElementFromList(elem)\n      } else {\n        // if the element is not shown update his position\n        CheckIfRender.elements[i] = CheckIfRender.calculateNewPosition(elem)\n      }\n    })\n    CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n      CheckIfRender.eventHandler\n    )\n  }\n}\n\nCheckIfRender.removeScrollHandler = function () {\n  window.cancelAnimationFrame(CheckIfRender.isListenerAttached)\n}\n\n//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded\nCheckIfRender.removeElementFromList = function (toRemove) {\n  CheckIfRender.elements = CheckIfRender.elements.filter(\n    (elem) => elem !== toRemove\n  )\n}\n\nCheckIfRender.isListenerAttached = false\n\nexport { CheckIfRender }\n","import React, { useState, useEffect, useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyBackgroundImage(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n  const [style, setStyle] = useState({\n    backgroundImage: `url(${isViewable.link})`,\n    ...props.style,\n  })\n\n  useEffect(() => {\n    setStyle({\n      backgroundImage: `url(${isViewable.link})`,\n      ...props.style,\n    })\n  }, [isViewable])\n\n  return (\n    <div className={props.className} style={style} ref={ref} >\n      {props.children}\n    </div>\n  )\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyImage(props) {\n  const ref = useRef()\n  const isViewable = useIsInViewPort(ref, props)\n\n  return (\n    <img\n      src={isViewable.link}\n      alt={props.alt}\n      style={props.style}\n      className={props.className}\n      ref={ref}\n    />\n  )\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyFrame(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n\n  return (\n    <iframe\n      height={props.height || '500'}\n      scrolling={props.scrolling || 'no'}\n      src={isViewable.link}\n      frameBorder={props.frameBorder || 'no'}\n      allowtransparency={props.allowTransparency || 'true'}\n      allowFullScreen={props.allowFullScreen || true}\n      style={props.style || {}}\n      ref={ref}\n    />\n  )\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyComponent(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n\n  const placeHolder = (\n    <div\n      style={\n        props.style\n          ? props.style\n          : {\n              heigt: '300px',\n              width: '300px',\n            }\n      }\n    />\n  )\n\n  return (\n    <div ref={ref}>{isViewable.visible ? props.children : placeHolder}</div>\n  )\n}\n"],"names":["root","factory","exports","module","require","define","amd","self","__WEBPACK_EXTERNAL_MODULE__787__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","useRenderIfInViewPort","element","props","useState","link","visible","state","setState","makeItVisible","useEffect","current","CheckIfRender","addElement","removeElementFromList","elements","LazyBackgroundImage","ref","useRef","isViewable","useIsInViewPort","backgroundImage","style","setStyle","className","children","LazyImage","src","alt","LazyFrame","height","scrolling","frameBorder","allowtransparency","allowTransparency","allowFullScreen","LazyComponent","placeHolder","heigt","width","isInViewPort","offset","top","left","window","scrollY","innerHeight","scrollX","innerWidth","calculateNewPosition","elem","getBoundingClientRect","right","push","isListenerAttached","requestAnimationFrame","eventHandler","length","removeScrollHandler","forEach","i","cancelAnimationFrame","toRemove","filter"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazy-react",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "components to lazy load iframes, images and images as backgrounds",
   "main": "./dist/index.js",
   "scripts": {

package/src/baseClass.js

@@ -62,7 +62,7 @@ CheckIfRender.addElement = function ({ element, props, makeItVisible }) {
     makeItVisible,
   })
   //check if has already been started the rAF cycle
-  if (typeof CheckIfRender.isListenerAttached !== 'function') {
+  if (typeof CheckIfRender.isListenerAttached === 'boolean') {
     CheckIfRender.isListenerAttached = window.requestAnimationFrame(
       CheckIfRender.eventHandler
     )
@@ -70,28 +70,21 @@ CheckIfRender.addElement = function ({ element, props, makeItVisible }) {
 }
 
 CheckIfRender.eventHandler = function () {
-  //if there is no more element to lazy load just remove the listeners/rAF
+  //if there is no more element to lazy load remove the listener/rAF
   if (CheckIfRender.elements.length === 0) {
     CheckIfRender.removeScrollHandler()
   } else {
-    //save every index of elements that has been loaded
-    let savedIndexs = []
-    for (let i = 0; i < CheckIfRender.elements.length; i++) {
-      if (CheckIfRender.isInViewPort(CheckIfRender.elements[i])) {
-        savedIndexs.push(i)
-        //make the element visible
-        CheckIfRender.elements[i].makeItVisible()
+    CheckIfRender.elements.forEach((elem, i) => {
+      // if element is in viewPort make it visible
+      if (CheckIfRender.isInViewPort(elem)) {
+        elem.makeItVisible()
+        // remove element from the list of elements to lazy load
+        CheckIfRender.removeElementFromList(elem)
+      } else {
+        // if the element is not shown update his position
+        CheckIfRender.elements[i] = CheckIfRender.calculateNewPosition(elem)
       }
-    }
-    //remove elements that has already been loaded from the list of the elements
-    if (savedIndexs.length > 0)
-      CheckIfRender.elements = CheckIfRender.elements.filter(
-        (elem, index) => !savedIndexs.includes(index)
-      )
-    //update the coordinates of the elements
-    CheckIfRender.elements = CheckIfRender.elements.map((elem) =>
-      CheckIfRender.calculateNewPosition(elem)
-    )
+    })
     CheckIfRender.isListenerAttached = window.requestAnimationFrame(
       CheckIfRender.eventHandler
     )

package/src/lazyLoadBackgroundImage.js

@@ -16,5 +16,9 @@ export default function LazyBackgroundImage(props) {
     })
   }, [isViewable])
 
-  return <div className={props.className} style={style} ref={ref} />
+  return (
+    <div className={props.className} style={style} ref={ref} >
+      {props.children}
+    </div>
+  )
 }

package/webpack.config.js

@@ -11,33 +11,6 @@ module.exports = {
     path: path.join(__dirname),
     filename: './dist/index.js'
   },
-  // optimization: {
-  //   minimizer: [
-  //     new UglifyJsPlugin({
-  //       sourceMap: true,
-  //       uglifyOptions: {
-  //         compress: {
-  //           inline: false
-  //         },
-  //         output: {
-  //           comments: false
-  //         }
-  //       }
-  //     })
-  //   ],
-  //   runtimeChunk: false,
-  //   splitChunks: {
-  //     cacheGroups: {
-  //       default: false,
-  //       commons: {
-  //         test: /[\\/]node_modules[\\/]/,
-  //         name: 'vendor_app',
-  //         chunks: 'all',
-  //         minChunks: 2
-  //       }
-  //     }
-  //   }
-  // },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {