lazy-react 3.4.1 → 3.6.0
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/.codeclimate.yml +2 -2
- package/.eslintrc +7 -1
- package/LICENSE +21 -0
- package/README.md +4 -5
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +5 -6
- package/src/demo/index.js +8 -2
- package/src/useIsInViewport.tsx +42 -44
package/.codeclimate.yml
CHANGED
package/.eslintrc
CHANGED
|
@@ -17,6 +17,12 @@
|
|
|
17
17
|
"plugin:@typescript-eslint/recommended"
|
|
18
18
|
],
|
|
19
19
|
"rules": {
|
|
20
|
-
"@typescript-eslint/ban-types": "off"
|
|
20
|
+
"@typescript-eslint/ban-types": "off",
|
|
21
|
+
"@typescript-eslint/no-explicit-any": "off"
|
|
22
|
+
},
|
|
23
|
+
"settings": {
|
|
24
|
+
"react": {
|
|
25
|
+
"version": "detect"
|
|
26
|
+
}
|
|
21
27
|
}
|
|
22
28
|
}
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Jonathan Obino
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -90,7 +90,7 @@ style | Object | html style attribute | | {width:'100%'}
|
|
|
90
90
|
|
|
91
91
|
```javascript
|
|
92
92
|
//with es6
|
|
93
|
-
import {LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent} from 'lazy-react'
|
|
93
|
+
import { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent } from 'lazy-react'
|
|
94
94
|
//with es5
|
|
95
95
|
var LazyBackgroundImage = require('lazy-react').LazyBackgroundImage
|
|
96
96
|
var LazyImage = require('lazy-react').LazyImage
|
|
@@ -128,7 +128,7 @@ class Example extends React.Component {
|
|
|
128
128
|
Since version 3.x there is an hook available named 'useIsInViewport' that exposes 3 elements:
|
|
129
129
|
|
|
130
130
|
- setRef: used to set the ref of the dom that has to be in the viewport
|
|
131
|
-
- link: the passed link. It's equal to
|
|
131
|
+
- link: the passed link. It's equal to an empty string until the element is in the specified viewport
|
|
132
132
|
- isVisible: it's false until the element is in the specified viewport
|
|
133
133
|
|
|
134
134
|
|
|
@@ -138,8 +138,8 @@ Usage
|
|
|
138
138
|
|
|
139
139
|
import useIsInViewport from 'lazy-react'
|
|
140
140
|
|
|
141
|
-
function Example(
|
|
142
|
-
const [setRef, link, isVisible] = useIsInViewport(
|
|
141
|
+
function Example({link, offset}) {
|
|
142
|
+
const [setRef, link, isVisible] = useIsInViewport({link, offset})
|
|
143
143
|
|
|
144
144
|
if(!isVisible){
|
|
145
145
|
return <Placeholder />
|
|
@@ -157,7 +157,6 @@ function Example(props) {
|
|
|
157
157
|
|
|
158
158
|
The required props that have to be passed to the hooks are:
|
|
159
159
|
|
|
160
|
-
- link: string
|
|
161
160
|
- offset: number
|
|
162
161
|
|
|
163
162
|
## Contributing
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e,t=require("react/jsx-runtime"),n=require("react");function r(e,t,n,r){Object.defineProperty(e,t,{get:n,set:r,enumerable:!0,configurable:!0})}function l(e){const[r,l,i]=a(e),[o,s]=(0,n.useState)({backgroundImage:`url(${l})`,...e.style});return(0,n.useEffect)((()=>{s({backgroundImage:`url(${l})`,...e.style})}),[l,i]),(0,t.jsx)("div",{className:e.className,style:o,ref:e=>{r(e)},children:e.children})}function i(e){const[n,r]=a(e);return(0,t.jsx)("div",{ref:e=>{n(e)},children:(0,t.jsx)("img",{src:r,alt:e.alt,style:e.style,className:e.className})})}function o(e){const[n,r]=a(e);return(0,t.jsx)("iframe",{height:e.height||"500",scrolling:e.scrolling||"no",src:r,frameBorder:e.frameBorder||"no",allowFullScreen:e.allowFullScreen||!0,style:e.style||{},ref:e=>{n(e)},...e})}function s(e){const[n,r,l]=a(e);return l?(0,t.jsx)("div",{children:e.children}):(0,t.jsx)("div",{ref:e=>{n(e)},style:{height:"300px",width:"300px",...e.style}})}function a(e){const[t,r]=(0,n.useState)(""),[l,i]=(0,n.useState)(!1),[o,s]=(0,n.useState)(null),a=(0,n.useMemo)((()=>({element:o,makeItVisible:d,offset:e.offset||100})),[o,e]),c=(0,n.useCallback)((e=>{null!==e&&s(e)}),[]);function d(){e.link&&r((()=>e.link)),i((()=>!0))}return(0,n.useEffect)((()=>(null!==o&&u.addElement(a),()=>u.removeElementFromList(a))),[o]),[c,t,l]}e=module.exports,Object.defineProperty(e,"__esModule",{value:!0,configurable:!0}),r(module.exports,"default",(()=>a)),r(module.exports,"LazyBackgroundImage",(()=>l)),r(module.exports,"LazyImage",(()=>i)),r(module.exports,"LazyFrame",(()=>o)),r(module.exports,"LazyComponent",(()=>s));
|
|
1
|
+
var e,t=require("react/jsx-runtime"),n=require("react");function r(e,t,n,r){Object.defineProperty(e,t,{get:n,set:r,enumerable:!0,configurable:!0})}function l(e){const[r,l,i]=a(e),[o,s]=(0,n.useState)({backgroundImage:`url(${l})`,...e.style});return(0,n.useEffect)((()=>{s({backgroundImage:`url(${l})`,...e.style})}),[l,i]),(0,t.jsx)("div",{className:e.className,style:o,ref:e=>{r(e)},children:e.children})}function i(e){const[n,r]=a(e);return(0,t.jsx)("div",{ref:e=>{n(e)},children:(0,t.jsx)("img",{src:r,alt:e.alt,style:e.style,className:e.className})})}function o(e){const[n,r]=a(e);return(0,t.jsx)("iframe",{height:e.height||"500",scrolling:e.scrolling||"no",src:r,frameBorder:e.frameBorder||"no",allowFullScreen:e.allowFullScreen||!0,style:e.style||{},ref:e=>{n(e)},...e})}function s(e){const[n,r,l]=a(e);return l?(0,t.jsx)("div",{children:e.children}):(0,t.jsx)("div",{ref:e=>{n(e)},style:{height:"300px",width:"300px",...e.style}})}function a(e){const[t,r]=(0,n.useState)(""),[l,i]=(0,n.useState)(!1),[o,s]=(0,n.useState)(null),a=(0,n.useMemo)((()=>({element:o,makeItVisible:d,offset:e.offset||100})),[o,e]),c=(0,n.useCallback)((e=>{null!==e&&s(e)}),[]);function d(){e.link&&r((()=>e.link)),i((()=>!0))}return(0,n.useEffect)((()=>(null!==o&&u.addElement(a),()=>u.removeElementFromList(a))),[o]),[c,t,l]}e=module.exports,Object.defineProperty(e,"__esModule",{value:!0,configurable:!0}),r(module.exports,"default",(()=>a)),r(module.exports,"LazyBackgroundImage",(()=>l)),r(module.exports,"LazyImage",(()=>i)),r(module.exports,"LazyFrame",(()=>o)),r(module.exports,"LazyComponent",(()=>s));const c=new Set,u={isInViewPort:({offset:e,top:t,left:n})=>t<window.innerHeight+e&&n<window.innerWidth+e,calculateNewPosition:e=>{const{top:t,left:n}=e.element?.getBoundingClientRect()||{top:0,left:0};return{...e,top:t,left:n}},addElement:function(e){c.add(e),0===u.isListenerAttached&&(u.isListenerAttached=window.requestAnimationFrame(u.eventHandler))},eventHandler:function(){0===c.size?u.removeScrollHandler():(c.forEach((e=>{u.isInViewPort(u.calculateNewPosition(e))&&(e.makeItVisible(),u.removeElementFromList(e))})),u.isListenerAttached=window.requestAnimationFrame(u.eventHandler))},removeScrollHandler:function(){window.cancelAnimationFrame(u.isListenerAttached),u.isListenerAttached=0},removeElementFromList:function(e){c.delete(e)},isListenerAttached:0};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"mJAGe,SAAAA,EAA6BC,GAC1C,MAAOC,EAAQC,EAAMC,GAAcC,EAAgBJ,IAE5CK,EAAOC,IAAY,EAAAC,EAAAC,UAAS,CACjCC,gBAAiB,OAAOP,QACrBF,EAAMK,QAUX,OAPA,EAAAE,EAAAG,YAAU,KACRJ,EAAS,CACPG,gBAAiB,OAAOP,QACrBF,EAAMK,OACT,GACD,CAACH,EAAMC,KAGR,EAAAQ,EAAAC,KAAC,MAAG,CACFC,UAAWb,EAAMa,UACjBR,MAAOA,EACPS,IAAMC,IACJd,EAAOc,EAAK,E,SAGbf,EAAMgB,U,CCvBE,SAAAC,EAAmBjB,GAChC,MAAOC,EAAQC,GAAQE,EAAgBJ,GAEvC,OACE,EAAAW,EAAAC,KAAC,MAAG,CACFE,IAAMC,IACJd,EAAOc,EAAK,E,UAGd,EAAAJ,EAAAC,KAAC,MAAG,CACFM,IAAKhB,EACLiB,IAAKnB,EAAMmB,IACXd,MAAOL,EAAMK,MACbQ,UAAWb,EAAMa,a,CCbV,SAAAO,EAAmBpB,GAChC,MAAOC,EAAQC,GAAQE,EAAgBJ,GAEvC,OACE,EAAAW,EAAAC,KAAC,SAAM,CACLS,OAAQrB,EAAMqB,QAAU,MACxBC,UAAWtB,EAAMsB,WAAa,KAC9BJ,IAAKhB,EACLqB,YAAavB,EAAMuB,aAAe,KAClCC,gBAAiBxB,EAAMwB,kBAAmB,EAC1CnB,MAAOL,EAAMK,OAAS,GACtBS,IAAMC,IACJd,EAAOc,EAAK,KAEVf,G,CCdK,SAAAyB,EAAuBzB,GACpC,MAAOC,EAAQC,EAAMwB,GAAatB,EAAgBJ,GAElD,OAAK0B,GAcE,EAAAf,EAAAC,KAAC,MAAG,C,SAAEZ,EAAMgB,YAZf,EAAAL,EAAAC,KAAC,MAAG,CACFE,IAAMC,IACJd,EAAOc,EAAK,EAEdV,MAAO,CACLgB,OAAQ,QACRM,MAAO,WACJ3B,EAAMK,Q,CCPJ,SAAAD,EAA+BJ,GAI5C,MAAOE,EAAM0B,IAAW,EAAArB,EAAAC,UAAS,KAC1BqB,EAASC,IAAc,EAAAvB,EAAAC,WAAS,IAEhCM,EAAKb,IAAU,EAAAM,EAAAC,UAAS,MAEzBuB,GAAe,EAAAxB,EAAAyB,UAAQ,KACpB,CACLC,QAASnB,E,cACToB,EACAC,OAAQnC,EAAMmC,QAAU,OAEzB,CAACrB,EAAKd,IAEHoC,GAAS,EAAA7B,EAAA8B,cAAatB,IACb,OAATA,GAAed,EAAOc,EAAK,GAC9B,IAEH,SAASmB,IACHlC,EAAME,MAAM0B,GAAQ,IAAM5B,EAAME,OACpC4B,GAAW,KAAM,G,CAYnB,OATA,EAAAvB,EAAAG,YAAU,KACI,OAARI,GAEFwB,EAAcC,WAAWR,GACpB,IAELO,EAAcE,sBAAsBT,KACrC,CAACjB,IAEG,CAACsB,EAAQlC,EAAM2B,E,6RAIxB,
|
|
1
|
+
{"mappings":"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","sources":["src/lazyLoadBackgroundImage.tsx","src/lazyLoadImage.tsx","src/lazyLoadFrame.tsx","src/lazyLoadComponent.tsx","src/useIsInViewport.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './index'\n\nexport default function LazyBackgroundImage(props: any) {\n const [setRef, link, isViewable] = useIsInViewPort(props)\n\n const [style, setStyle] = useState({\n backgroundImage: `url(${link})`,\n ...props.style,\n })\n\n useEffect(() => {\n setStyle({\n backgroundImage: `url(${link})`,\n ...props.style,\n })\n }, [link, isViewable])\n\n return (\n <div\n className={props.className}\n style={style}\n ref={(node) => {\n setRef(node)\n }}\n >\n {props.children}\n </div>\n )\n}\n","import React from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './index'\n\nexport default function LazyImage(props: any) {\n const [setRef, link] = useIsInViewPort(props)\n\n return (\n <div\n ref={(node) => {\n setRef(node)\n }}\n >\n <img\n src={link}\n alt={props.alt}\n style={props.style}\n className={props.className}\n />\n </div>\n )\n}\n","import React from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './index'\n\nexport default function LazyFrame(props: any) {\n const [setRef, link] = useIsInViewPort(props)\n\n return (\n <iframe\n height={props.height || '500'}\n scrolling={props.scrolling || 'no'}\n src={link}\n frameBorder={props.frameBorder || 'no'}\n allowFullScreen={props.allowFullScreen || true}\n style={props.style || {}}\n ref={(node) => {\n setRef(node)\n }}\n {...props}\n />\n )\n}\n","import React from 'react'\nimport useIsInViewport from './index'\n\nexport default function LazyComponent(props: any) {\n const [setRef, link, isVisible] = useIsInViewport(props)\n\n if (!isVisible)\n return (\n <div\n ref={(node) => {\n setRef(node)\n }}\n style={{\n height: '300px',\n width: '300px',\n ...props.style,\n }}\n ></div>\n )\n\n return <div>{props.children}</div>\n}\n","import { useState, useEffect, useMemo, useCallback } from 'react' // eslint-disable-line no-unused-vars\n\ninterface InstanceElement {\n makeItVisible: () => void\n element: HTMLElement | null\n offset: number\n}\n\nexport default function useRenderIfInViewPort(props: {\n link: string\n offset: number\n}): [Function, string, boolean] {\n const [link, setLink] = useState('')\n const [visible, setVisible] = useState(false)\n\n const [ref, setRef] = useState(null)\n\n const thisInstance = useMemo(() => {\n return {\n element: ref,\n makeItVisible,\n offset: props.offset || 100,\n }\n }, [ref, props])\n\n const getRef = useCallback((node) => {\n if (node !== null) setRef(node)\n }, [])\n\n function makeItVisible() {\n if (props.link) setLink(() => props.link)\n setVisible(() => true)\n }\n\n useEffect(() => {\n if (ref !== null)\n // add the element to the array of elements that are waiting to be lazy loaded\n CheckIfRender.addElement(thisInstance)\n return () =>\n // if the element is unloaded remove the element from the list of elements that needs to be lazy loader\n CheckIfRender.removeElementFromList(thisInstance)\n }, [ref])\n\n return [getRef, link, visible]\n}\n\n// array with all the elements that are waiting to be shown in the viewport\nconst elements = new Set<InstanceElement>()\n\nconst CheckIfRender = {\n // top: the position of the element in relation with the top of the browser\n // left: the position of the element in relation with the left of the browser\n // offset: the desired offset of the element in relation of the viewport\n isInViewPort: ({\n offset,\n top,\n left,\n }: {\n offset: number\n top: number\n left: number\n }) => top < window.innerHeight + offset && left < window.innerWidth + offset,\n\n calculateNewPosition: (elem: InstanceElement) => {\n const { top, left } = elem.element?.getBoundingClientRect() || {\n top: 0,\n left: 0,\n }\n\n return {\n ...elem,\n top,\n left,\n }\n },\n addElement: function (element: InstanceElement) {\n //the distance from the pixel 0,0 and the top of the element\n elements.add(element)\n //check if has already been started the rAF cycle\n if (CheckIfRender.isListenerAttached === 0) {\n CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n CheckIfRender.eventHandler\n )\n }\n },\n eventHandler: function () {\n //if there is no more element to lazy load remove the listener/rAF\n if (elements.size === 0) {\n CheckIfRender.removeScrollHandler()\n } else {\n elements.forEach((elem) => {\n const haveToShow = CheckIfRender.isInViewPort(\n CheckIfRender.calculateNewPosition(elem)\n )\n if (haveToShow) {\n elem.makeItVisible()\n // remove element from the list of elements to lazy load\n CheckIfRender.removeElementFromList(elem)\n }\n })\n CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n CheckIfRender.eventHandler\n )\n }\n },\n\n removeScrollHandler: function () {\n window.cancelAnimationFrame(CheckIfRender.isListenerAttached)\n CheckIfRender.isListenerAttached = 0\n },\n //When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded\n removeElementFromList: function (toRemove: InstanceElement) {\n elements.delete(toRemove)\n },\n isListenerAttached: 0, // intended as not set\n}\n"],"names":["$6e38eea936045ca0$export$2e2bcd8739ae039","props","setRef","link","isViewable","$03b515f3f8c77d8f$export$2e2bcd8739ae039","style","setStyle","$9w1Q4$react","useState","backgroundImage","useEffect","$9w1Q4$reactjsxruntime","jsx","className","ref","node","children","$f6f596272f209e0c$export$2e2bcd8739ae039","src","alt","$8e3d626f2d1eebd8$export$2e2bcd8739ae039","height","scrolling","frameBorder","allowFullScreen","$c17687259f8b5ddf$export$2e2bcd8739ae039","isVisible","width","setLink","visible","setVisible","thisInstance","useMemo","element","makeItVisible","offset","getRef","useCallback","$03b515f3f8c77d8f$var$CheckIfRender","addElement","removeElementFromList","$03b515f3f8c77d8f$var$elements","Set","isInViewPort","top","left","window","innerHeight","innerWidth","calculateNewPosition","elem","getBoundingClientRect","add","isListenerAttached","requestAnimationFrame","eventHandler","size","removeScrollHandler","forEach","cancelAnimationFrame","toRemove","delete"],"version":3,"file":"index.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lazy-react",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0",
|
|
4
4
|
"description": "components to lazy load iframes, images and images as backgrounds",
|
|
5
5
|
"source": "./src/index.tsx",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -35,11 +35,10 @@
|
|
|
35
35
|
"url": "https://github.com/jonathanobino/react-lazy"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@testing-library/react": "^12.1.4",
|
|
39
38
|
"@types/jest": "^27.4.1",
|
|
40
39
|
"@types/node": "^17.0.21",
|
|
41
|
-
"@types/react": "^
|
|
42
|
-
"@types/react-dom": "^
|
|
40
|
+
"@types/react": "^18.3.0",
|
|
41
|
+
"@types/react-dom": "^18.3.0",
|
|
43
42
|
"@typescript-eslint/eslint-plugin": "^5.35.1",
|
|
44
43
|
"@typescript-eslint/parser": "^5.35.1",
|
|
45
44
|
"eslint": "^7.32.0",
|
|
@@ -53,7 +52,7 @@
|
|
|
53
52
|
"process": "^0.11.10"
|
|
54
53
|
},
|
|
55
54
|
"peerDependencies": {
|
|
56
|
-
"react": "^
|
|
57
|
-
"react-dom": "^
|
|
55
|
+
"react": "^18.3.0",
|
|
56
|
+
"react-dom": "^18.3.0"
|
|
58
57
|
}
|
|
59
58
|
}
|
package/src/demo/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
|
|
1
3
|
import React from 'react'
|
|
2
|
-
import
|
|
4
|
+
import { createRoot } from 'react-dom/client'
|
|
3
5
|
import { LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent } from '../../dist'
|
|
4
6
|
|
|
5
7
|
function Experimental (){
|
|
@@ -57,4 +59,8 @@ function Demo() {
|
|
|
57
59
|
</div>
|
|
58
60
|
}
|
|
59
61
|
|
|
60
|
-
|
|
62
|
+
const container = document.getElementById('app');
|
|
63
|
+
const root = createRoot(container);
|
|
64
|
+
root.render(<Demo/>)
|
|
65
|
+
|
|
66
|
+
// ReactDOM.render(<Demo/>, document.getElementById('app'))
|
package/src/useIsInViewport.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useState, useEffect, useMemo, useCallback } from 'react'
|
|
1
|
+
import { useState, useEffect, useMemo, useCallback } from 'react'
|
|
2
2
|
|
|
3
3
|
interface InstanceElement {
|
|
4
4
|
makeItVisible: () => void
|
|
@@ -6,46 +6,8 @@ interface InstanceElement {
|
|
|
6
6
|
offset: number
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
export default function useRenderIfInViewPort(props: {
|
|
10
|
-
link: string
|
|
11
|
-
offset: number
|
|
12
|
-
}): [Function, string, boolean] {
|
|
13
|
-
const [link, setLink] = useState('')
|
|
14
|
-
const [visible, setVisible] = useState(false)
|
|
15
|
-
|
|
16
|
-
const [ref, setRef] = useState(null)
|
|
17
|
-
|
|
18
|
-
const thisInstance = useMemo(() => {
|
|
19
|
-
return {
|
|
20
|
-
element: ref,
|
|
21
|
-
makeItVisible,
|
|
22
|
-
offset: props.offset || 100,
|
|
23
|
-
}
|
|
24
|
-
}, [ref, props])
|
|
25
|
-
|
|
26
|
-
const getRef = useCallback((node) => {
|
|
27
|
-
if (node !== null) setRef(node)
|
|
28
|
-
}, [])
|
|
29
|
-
|
|
30
|
-
function makeItVisible() {
|
|
31
|
-
if (props.link) setLink(() => props.link)
|
|
32
|
-
setVisible(() => true)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
if (ref !== null)
|
|
37
|
-
// add the element to the array of elements that are waiting to be lazy loaded
|
|
38
|
-
CheckIfRender.addElement(thisInstance)
|
|
39
|
-
return () =>
|
|
40
|
-
// if the element is unloaded remove the element from the list of elements that needs to be lazy loader
|
|
41
|
-
CheckIfRender.removeElementFromList(thisInstance)
|
|
42
|
-
}, [ref])
|
|
43
|
-
|
|
44
|
-
return [getRef, link, visible]
|
|
45
|
-
}
|
|
46
|
-
|
|
47
9
|
// array with all the elements that are waiting to be shown in the viewport
|
|
48
|
-
|
|
10
|
+
const elements = new Set<InstanceElement>()
|
|
49
11
|
|
|
50
12
|
const CheckIfRender = {
|
|
51
13
|
// top: the position of the element in relation with the top of the browser
|
|
@@ -75,7 +37,7 @@ const CheckIfRender = {
|
|
|
75
37
|
},
|
|
76
38
|
addElement: function (element: InstanceElement) {
|
|
77
39
|
//the distance from the pixel 0,0 and the top of the element
|
|
78
|
-
elements.
|
|
40
|
+
elements.add(element)
|
|
79
41
|
//check if has already been started the rAF cycle
|
|
80
42
|
if (CheckIfRender.isListenerAttached === 0) {
|
|
81
43
|
CheckIfRender.isListenerAttached = window.requestAnimationFrame(
|
|
@@ -85,7 +47,7 @@ const CheckIfRender = {
|
|
|
85
47
|
},
|
|
86
48
|
eventHandler: function () {
|
|
87
49
|
//if there is no more element to lazy load remove the listener/rAF
|
|
88
|
-
if (elements.
|
|
50
|
+
if (elements.size === 0) {
|
|
89
51
|
CheckIfRender.removeScrollHandler()
|
|
90
52
|
} else {
|
|
91
53
|
elements.forEach((elem) => {
|
|
@@ -110,9 +72,45 @@ const CheckIfRender = {
|
|
|
110
72
|
},
|
|
111
73
|
//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded
|
|
112
74
|
removeElementFromList: function (toRemove: InstanceElement) {
|
|
113
|
-
elements
|
|
75
|
+
elements.delete(toRemove)
|
|
114
76
|
},
|
|
115
77
|
isListenerAttached: 0, // intended as not set
|
|
116
78
|
}
|
|
117
79
|
|
|
118
|
-
export
|
|
80
|
+
export default function useRenderIfInViewPort(props: {
|
|
81
|
+
link: string
|
|
82
|
+
offset: number
|
|
83
|
+
}): [Function, string, boolean] {
|
|
84
|
+
const [link, setLink] = useState('')
|
|
85
|
+
const [visible, setVisible] = useState(false)
|
|
86
|
+
|
|
87
|
+
const [ref, setRef] = useState(null)
|
|
88
|
+
|
|
89
|
+
const thisInstance = useMemo(() => {
|
|
90
|
+
return {
|
|
91
|
+
element: ref,
|
|
92
|
+
makeItVisible,
|
|
93
|
+
offset: props.offset || 100,
|
|
94
|
+
}
|
|
95
|
+
}, [ref, props])
|
|
96
|
+
|
|
97
|
+
const getRef = useCallback((node) => {
|
|
98
|
+
if (node !== null) setRef(node)
|
|
99
|
+
}, [])
|
|
100
|
+
|
|
101
|
+
function makeItVisible() {
|
|
102
|
+
if (props.link) setLink(() => props.link)
|
|
103
|
+
setVisible(() => true)
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
if (ref !== null)
|
|
108
|
+
// add the element to the array of elements that are waiting to be lazy loaded
|
|
109
|
+
CheckIfRender.addElement(thisInstance)
|
|
110
|
+
return () =>
|
|
111
|
+
// if the element is unloaded remove the element from the list of elements that needs to be lazy loader
|
|
112
|
+
CheckIfRender.removeElementFromList(thisInstance)
|
|
113
|
+
}, [ref])
|
|
114
|
+
|
|
115
|
+
return [getRef, link, visible]
|
|
116
|
+
}
|