lazy-react 3.5.0 → 3.6.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/LICENSE +21 -0
- package/README.md +4 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +5 -6
- package/src/demo/index.js +6 -2
- package/src/useIsInViewport.tsx +39 -39
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
|
@@ -157,9 +157,12 @@ function Example({link, offset}) {
|
|
|
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
|
|
164
163
|
|
|
165
164
|
Pull requests for bug fixes, new features, and improvements are welcomed.
|
|
165
|
+
|
|
166
|
+
## Changelog
|
|
167
|
+
|
|
168
|
+
- 3.6.0: upgrade to react 18.3
|
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]=
|
|
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]=u(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]=u(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]=u(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]=u(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}})}e=module.exports,Object.defineProperty(e,"__esModule",{value:!0,configurable:!0}),r(module.exports,"default",(()=>u)),r(module.exports,"LazyBackgroundImage",(()=>l)),r(module.exports,"LazyImage",(()=>i)),r(module.exports,"LazyFrame",(()=>o)),r(module.exports,"LazyComponent",(()=>s));const a=new Set,c={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){a.add(e),0===c.isListenerAttached&&(c.isListenerAttached=window.requestAnimationFrame(c.eventHandler))},eventHandler:function(){0===a.size?c.removeScrollHandler():(a.forEach((e=>{c.isInViewPort(c.calculateNewPosition(e))&&(e.makeItVisible(),c.removeElementFromList(e))})),c.isListenerAttached=window.requestAnimationFrame(c.eventHandler))},removeScrollHandler:function(){window.cancelAnimationFrame(c.isListenerAttached),c.isListenerAttached=0},removeElementFromList:function(e){a.delete(e)},isListenerAttached:0};function u(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]),u=(0,n.useCallback)((e=>{null!==e&&s(e)}),[]);function d(){e.link&&r((()=>e.link)),i((()=>!0))}return(0,n.useEffect)((()=>(null!==o&&c.addElement(a),()=>c.removeElementFromList(a))),[o]),[u,t,l]}
|
|
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,
|
|
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'\n\ninterface InstanceElement {\n makeItVisible: () => void\n element: HTMLElement | null\n offset: number\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\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"],"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","$03b515f3f8c77d8f$var$elements","Set","$03b515f3f8c77d8f$var$CheckIfRender","isInViewPort","offset","top","left","window","innerHeight","innerWidth","calculateNewPosition","elem","element","getBoundingClientRect","addElement","add","isListenerAttached","requestAnimationFrame","eventHandler","size","removeScrollHandler","forEach","makeItVisible","removeElementFromList","cancelAnimationFrame","toRemove","delete","setLink","visible","setVisible","thisInstance","useMemo","getRef","useCallback"],"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.1",
|
|
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,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
|
|
3
3
|
import React from 'react'
|
|
4
|
-
import
|
|
4
|
+
import { createRoot } from 'react-dom/client'
|
|
5
5
|
import { LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent } from '../../dist'
|
|
6
6
|
|
|
7
7
|
function Experimental (){
|
|
@@ -59,4 +59,8 @@ function Demo() {
|
|
|
59
59
|
</div>
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
|
|
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,44 +6,6 @@ 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
|
|
|
@@ -114,3 +76,41 @@ const CheckIfRender = {
|
|
|
114
76
|
},
|
|
115
77
|
isListenerAttached: 0, // intended as not set
|
|
116
78
|
}
|
|
79
|
+
|
|
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
|
+
}
|