lazy-react 3.0.1 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -10
- package/demo/index.html +1 -0
- package/demo/index.js +1 -1
- package/dist/index.js +1 -2
- package/package.json +1 -1
- package/src/baseClass.js +10 -6
- package/src/index.js +8 -1
- package/src/lazyLoadBackgroundImage.js +5 -1
- package/webpack.config.js +0 -28
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -7,9 +7,9 @@ Utility components to lazy load images, images-as-background and iframes using o
|
|
|
7
7
|
|
|
8
8
|
## Install
|
|
9
9
|
|
|
10
|
-
`npm install --save lazy-react`
|
|
10
|
+
`npm install --save lazy-react`
|
|
11
11
|
|
|
12
|
-
Also available as umd on [unpkg](https://unpkg.com/lazy-react)
|
|
12
|
+
Also available as umd on [unpkg](https://unpkg.com/lazy-react)
|
|
13
13
|
|
|
14
14
|
`<script src="https://unpkg.com/lazy-react"></script>`
|
|
15
15
|
|
|
@@ -19,11 +19,12 @@ You can see a demo of those packages in my [personal site](http://jonathanobino.
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
The package exports
|
|
22
|
+
The package exports 4 components:
|
|
23
23
|
|
|
24
24
|
- LazyBackgroundImage
|
|
25
25
|
- LazyImage
|
|
26
26
|
- LazyFrame
|
|
27
|
+
- LazyComponent
|
|
27
28
|
|
|
28
29
|
Every component accepts **offeset** as a prop, with 100px as fallback.
|
|
29
30
|
|
|
@@ -46,6 +47,17 @@ Name | Type | Description | Required | Default
|
|
|
46
47
|
className | String | html class attribute | | empty string
|
|
47
48
|
style | Object | html style attribute | | {} |
|
|
48
49
|
|
|
50
|
+
This component is used to have a div placeholder before loading the component.
|
|
51
|
+
|
|
52
|
+
Usage:
|
|
53
|
+
```javascript
|
|
54
|
+
|
|
55
|
+
<LazyComponent>
|
|
56
|
+
<ComponentToLoadWhenInViewport>
|
|
57
|
+
</LazyComponent>
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
49
61
|
### LazyImage
|
|
50
62
|
|
|
51
63
|
#### Props
|
|
@@ -79,11 +91,12 @@ style | Object | html style attribute | | {width:'100%'}
|
|
|
79
91
|
|
|
80
92
|
```javascript
|
|
81
93
|
//with es6
|
|
82
|
-
import {LazyBackgroundImage, LazyImage, LazyFrame} from 'lazy-react'
|
|
94
|
+
import {LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent} from 'lazy-react'
|
|
83
95
|
//with es5
|
|
84
96
|
var LazyBackgroundImage = require('lazy-react').LazyBackgroundImage
|
|
85
97
|
var LazyImage = require('lazy-react').LazyImage
|
|
86
98
|
var LazyFrame = require('lazy-react').LazyFrame
|
|
99
|
+
var LazyComponent = require('lazy-react').LazyComponent
|
|
87
100
|
|
|
88
101
|
class Example extends React.Component {
|
|
89
102
|
constructor(props) {
|
|
@@ -91,18 +104,21 @@ class Example extends React.Component {
|
|
|
91
104
|
}
|
|
92
105
|
render() {
|
|
93
106
|
return <div>
|
|
94
|
-
<LazyBackgroundImage
|
|
95
|
-
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
107
|
+
<LazyBackgroundImage
|
|
108
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
96
109
|
className="fill"
|
|
97
110
|
/>
|
|
98
|
-
<LazyImage
|
|
99
|
-
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
111
|
+
<LazyImage
|
|
112
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
100
113
|
offset={100}
|
|
101
114
|
/>
|
|
102
|
-
<LazyFrame
|
|
103
|
-
link={'http://jonathanobino.xyz'}
|
|
115
|
+
<LazyFrame
|
|
116
|
+
link={'http://jonathanobino.xyz'}
|
|
104
117
|
scrolling={true}
|
|
105
118
|
/>
|
|
119
|
+
<LazyComponent>
|
|
120
|
+
<ComponentToLoadWhenInViewport>
|
|
121
|
+
</LazyComponent>
|
|
106
122
|
</div>
|
|
107
123
|
}
|
|
108
124
|
}
|
package/demo/index.html
CHANGED
package/demo/index.js
CHANGED
|
@@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
|
|
|
26
26
|
\***********************/
|
|
27
27
|
/***/ ((module, exports, __webpack_require__) => {
|
|
28
28
|
|
|
29
|
-
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 }), \"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 });\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?");
|
|
29
|
+
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 i = r[e] = {\n exports: {}\n };\n return t[e](i, i.exports, n), i.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 useRenderIfInViewPort: function useRenderIfInViewPort() {\n return i;\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 i(t, n) {\n var o,\n i,\n a = (o = (0, e.useState)({\n link: \"\",\n visible: !1\n }), i = 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 i = [],\n l = !0,\n a = !1;\n\n try {\n for (r = r.call(e); !(l = (n = r.next()).done) && (i.push(n.value), !t || i.length !== t); l = !0) {\n ;\n }\n } catch (e) {\n a = !0, o = e;\n } finally {\n try {\n l || null == r[\"return\"] || r[\"return\"]();\n } finally {\n if (a) throw o;\n }\n }\n\n return i;\n }\n }(o, i) || 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, i) || 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 && l.addElement({\n element: t.current,\n props: n,\n makeItVisible: s\n }), function () {\n return l.removeElementFromList({\n element: t.current,\n props: n,\n makeItVisible: s\n });\n };\n }, []), u;\n }\n\n var l = {\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 l = (0, e.useRef)(),\n u = i(l, 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 i = [],\n l = !0,\n a = !1;\n\n try {\n for (r = r.call(e); !(l = (n = r.next()).done) && (i.push(n.value), !t || i.length !== t); l = !0) {\n ;\n }\n } catch (e) {\n a = !0, o = e;\n } finally {\n try {\n l || null == r[\"return\"] || r[\"return\"]();\n } finally {\n if (a) throw o;\n }\n }\n\n return i;\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: l\n }, r.children);\n }\n\n function c(r) {\n var n = (0, e.useRef)(),\n o = i(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 = i(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 = i(n, r),\n l = 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 : l);\n }\n\n l.isInViewPort = function (e) {\n var t = e.offset,\n r = e.top,\n n = e.left;\n return r < window.innerHeight + t && n < window.innerWidth + t;\n }, l.calculateNewPosition = function (e) {\n var t = e.element.getBoundingClientRect(),\n r = t.top,\n n = t.left;\n return Object.assign({}, e, {\n top: r,\n left: n\n });\n }, l.addElement = function (e) {\n var t = e.element,\n r = e.props,\n n = e.makeItVisible,\n o = t.getBoundingClientRect(),\n i = o.top,\n a = o.left;\n l.elements.push({\n element: t,\n top: i,\n left: a,\n offset: r.offset || 100,\n makeItVisible: n\n }), \"boolean\" == typeof l.isListenerAttached && (l.isListenerAttached = window.requestAnimationFrame(l.eventHandler));\n }, l.eventHandler = function () {\n 0 === l.elements.length ? l.removeScrollHandler() : (l.elements.forEach(function (e, t) {\n l.isInViewPort(e) ? (e.makeItVisible(), l.removeElementFromList(e)) : l.elements[t] = l.calculateNewPosition(e);\n }), l.isListenerAttached = window.requestAnimationFrame(l.eventHandler));\n }, l.removeScrollHandler = function () {\n window.cancelAnimationFrame(l.isListenerAttached), l.isListenerAttached = !1;\n }, l.removeElementFromList = function (e) {\n l.elements = l.elements.filter(function (t) {\n return t !== e;\n });\n }, l.isListenerAttached = !1;\n }(), o;\n }();\n});\n\n//# sourceURL=webpack://lazy-react/./dist/index.js?");
|
|
30
30
|
|
|
31
31
|
/***/ }),
|
|
32
32
|
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
!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
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
!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 i=r[e]={exports:{}};return t[e](i,i.exports,n),i.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,useRenderIfInViewPort:()=>i});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 i(t,n){var o,i,a=(o=(0,e.useState)({link:"",visible:!1}),i=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,i=[],l=!0,a=!1;try{for(r=r.call(e);!(l=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==r.return||r.return()}finally{if(a)throw o}}return i}}(o,i)||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,i)||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&&l.addElement({element:t.current,props:n,makeItVisible:s}),function(){return l.removeElementFromList({element:t.current,props:n,makeItVisible:s})}}),[]),u}var l={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,l=(0,e.useRef)(),u=i(l,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,i=[],l=!0,a=!1;try{for(r=r.call(e);!(l=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==r.return||r.return()}finally{if(a)throw o}}return i}}(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:l},r.children)}function c(r){var n=(0,e.useRef)(),o=i(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=i(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=i(n,r),l=t().createElement("div",{style:r.style?r.style:{heigt:"300px",width:"300px"}});return t().createElement("div",{ref:n},o.visible?r.children:l)}l.isInViewPort=function(e){var t=e.offset,r=e.top,n=e.left;return r<window.innerHeight+t&&n<window.innerWidth+t},l.calculateNewPosition=function(e){var t=e.element.getBoundingClientRect(),r=t.top,n=t.left;return Object.assign({},e,{top:r,left:n})},l.addElement=function(e){var t=e.element,r=e.props,n=e.makeItVisible,o=t.getBoundingClientRect(),i=o.top,a=o.left;l.elements.push({element:t,top:i,left:a,offset:r.offset||100,makeItVisible:n}),"boolean"==typeof l.isListenerAttached&&(l.isListenerAttached=window.requestAnimationFrame(l.eventHandler))},l.eventHandler=function(){0===l.elements.length?l.removeScrollHandler():(l.elements.forEach((function(e,t){l.isInViewPort(e)?(e.makeItVisible(),l.removeElementFromList(e)):l.elements[t]=l.calculateNewPosition(e)})),l.isListenerAttached=window.requestAnimationFrame(l.eventHandler))},l.removeScrollHandler=function(){window.cancelAnimationFrame(l.isListenerAttached),l.isListenerAttached=!1},l.removeElementFromList=function(e){l.elements=l.elements.filter((function(t){return t!==e}))},l.isListenerAttached=!1})(),o})()}));
|
package/package.json
CHANGED
package/src/baseClass.js
CHANGED
|
@@ -16,12 +16,14 @@ export default function useRenderIfInViewPort(element, props) {
|
|
|
16
16
|
useEffect(() => {
|
|
17
17
|
if (element.current !== undefined)
|
|
18
18
|
CheckIfRender.addElement({
|
|
19
|
+
// add the element to the array of elements that are waiting to be lazy loaded
|
|
19
20
|
element: element.current,
|
|
20
21
|
props,
|
|
21
22
|
makeItVisible,
|
|
22
23
|
})
|
|
23
24
|
return () =>
|
|
24
25
|
CheckIfRender.removeElementFromList({
|
|
26
|
+
// if the element is unloaded remove the element from the list of elements that needs to be lazy loader
|
|
25
27
|
element: element.current,
|
|
26
28
|
props,
|
|
27
29
|
makeItVisible,
|
|
@@ -31,33 +33,34 @@ export default function useRenderIfInViewPort(element, props) {
|
|
|
31
33
|
return state
|
|
32
34
|
}
|
|
33
35
|
|
|
36
|
+
// array with all the elements that are waiting to be shown in the viewport
|
|
34
37
|
const CheckIfRender = {
|
|
35
38
|
elements: [],
|
|
36
39
|
}
|
|
37
40
|
|
|
41
|
+
// top: the position of the element in relation with the top of the browser
|
|
42
|
+
// left: the position of the element in relation with the left of the browser
|
|
43
|
+
// offset: the desired offset of the element in relation of the viewport
|
|
38
44
|
CheckIfRender.isInViewPort = ({ offset, top, left }) =>
|
|
39
|
-
|
|
40
|
-
window.scrollX + window.innerWidth + offset > left
|
|
45
|
+
top < window.innerHeight + offset && left < window.innerWidth + offset
|
|
41
46
|
|
|
42
47
|
CheckIfRender.calculateNewPosition = (elem) => {
|
|
43
48
|
const reference = elem.element
|
|
44
|
-
const { top, left
|
|
49
|
+
const { top, left } = reference.getBoundingClientRect()
|
|
45
50
|
return {
|
|
46
51
|
...elem,
|
|
47
52
|
top,
|
|
48
53
|
left,
|
|
49
|
-
right,
|
|
50
54
|
}
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
CheckIfRender.addElement = function ({ element, props, makeItVisible }) {
|
|
54
58
|
//the distance from the pixel 0,0 and the top of the element
|
|
55
|
-
const { top, left
|
|
59
|
+
const { top, left } = element.getBoundingClientRect()
|
|
56
60
|
CheckIfRender.elements.push({
|
|
57
61
|
element,
|
|
58
62
|
top,
|
|
59
63
|
left,
|
|
60
|
-
right,
|
|
61
64
|
offset: props.offset || 100,
|
|
62
65
|
makeItVisible,
|
|
63
66
|
})
|
|
@@ -93,6 +96,7 @@ CheckIfRender.eventHandler = function () {
|
|
|
93
96
|
|
|
94
97
|
CheckIfRender.removeScrollHandler = function () {
|
|
95
98
|
window.cancelAnimationFrame(CheckIfRender.isListenerAttached)
|
|
99
|
+
CheckIfRender.isListenerAttached = false
|
|
96
100
|
}
|
|
97
101
|
|
|
98
102
|
//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded
|
package/src/index.js
CHANGED
|
@@ -2,5 +2,12 @@ import LazyBackgroundImage from './lazyLoadBackgroundImage'
|
|
|
2
2
|
import LazyImage from './lazyLoadImage'
|
|
3
3
|
import LazyFrame from './lazyLoadFrame'
|
|
4
4
|
import LazyComponent from './lazyLoadComponent'
|
|
5
|
+
import useRenderIfInViewPort from './baseClass'
|
|
5
6
|
|
|
6
|
-
export {
|
|
7
|
+
export {
|
|
8
|
+
LazyBackgroundImage,
|
|
9
|
+
LazyImage,
|
|
10
|
+
LazyFrame,
|
|
11
|
+
LazyComponent,
|
|
12
|
+
useRenderIfInViewPort,
|
|
13
|
+
}
|
|
@@ -16,5 +16,9 @@ export default function LazyBackgroundImage(props) {
|
|
|
16
16
|
})
|
|
17
17
|
}, [isViewable])
|
|
18
18
|
|
|
19
|
-
return
|
|
19
|
+
return (
|
|
20
|
+
<div className={props.className} style={style} ref={ref}>
|
|
21
|
+
{props.children}
|
|
22
|
+
</div>
|
|
23
|
+
)
|
|
20
24
|
}
|
package/webpack.config.js
CHANGED
|
@@ -4,40 +4,12 @@ var webpack = require('webpack')
|
|
|
4
4
|
module.exports = {
|
|
5
5
|
mode:'production',
|
|
6
6
|
entry: './src/index.js',
|
|
7
|
-
devtool: 'source-map',
|
|
8
7
|
output: {
|
|
9
8
|
library: 'LazyReact',
|
|
10
9
|
libraryTarget: 'umd',
|
|
11
10
|
path: path.join(__dirname),
|
|
12
11
|
filename: './dist/index.js'
|
|
13
12
|
},
|
|
14
|
-
// optimization: {
|
|
15
|
-
// minimizer: [
|
|
16
|
-
// new UglifyJsPlugin({
|
|
17
|
-
// sourceMap: true,
|
|
18
|
-
// uglifyOptions: {
|
|
19
|
-
// compress: {
|
|
20
|
-
// inline: false
|
|
21
|
-
// },
|
|
22
|
-
// output: {
|
|
23
|
-
// comments: false
|
|
24
|
-
// }
|
|
25
|
-
// }
|
|
26
|
-
// })
|
|
27
|
-
// ],
|
|
28
|
-
// runtimeChunk: false,
|
|
29
|
-
// splitChunks: {
|
|
30
|
-
// cacheGroups: {
|
|
31
|
-
// default: false,
|
|
32
|
-
// commons: {
|
|
33
|
-
// test: /[\\/]node_modules[\\/]/,
|
|
34
|
-
// name: 'vendor_app',
|
|
35
|
-
// chunks: 'all',
|
|
36
|
-
// minChunks: 2
|
|
37
|
-
// }
|
|
38
|
-
// }
|
|
39
|
-
// }
|
|
40
|
-
// },
|
|
41
13
|
plugins: [
|
|
42
14
|
new webpack.DefinePlugin({
|
|
43
15
|
'process.env': {
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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 === 'boolean') {\n CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n CheckIfRender.eventHandler\n )\n }\n}\n\n/*CheckIfRender.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.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 <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","forEach","i","cancelAnimationFrame","toRemove","filter"],"sourceRoot":""}
|