lazy-react 3.4.0 → 3.4.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/.eslintrc +11 -29
- package/README.md +32 -32
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +10 -7
- package/src/demo/index.js +52 -62
- package/src/lazyLoadBackgroundImage.tsx +1 -1
- package/src/lazyLoadFrame.tsx +1 -1
- package/src/useIsInViewport.tsx +4 -5
- package/demo/index.0aef4497.js +0 -25760
- package/demo/index.0aef4497.js.map +0 -1
- package/demo/index.html +0 -43
package/.eslintrc
CHANGED
|
@@ -4,37 +4,19 @@
|
|
|
4
4
|
"es6": true,
|
|
5
5
|
"node": true
|
|
6
6
|
},
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"ecmaFeatures": {
|
|
10
|
-
"experimentalObjectRestSpread": true,
|
|
11
|
-
"jsx": true
|
|
12
|
-
},
|
|
13
|
-
"sourceType": "module"
|
|
14
|
-
},
|
|
7
|
+
"root": true,
|
|
8
|
+
"parser": "@typescript-eslint/parser",
|
|
15
9
|
"plugins": [
|
|
16
|
-
"
|
|
10
|
+
"@typescript-eslint"
|
|
11
|
+
],
|
|
12
|
+
"extends": [
|
|
13
|
+
"eslint:recommended",
|
|
14
|
+
"plugin:react/recommended",
|
|
15
|
+
"prettier",
|
|
16
|
+
"plugin:@typescript-eslint/eslint-recommended",
|
|
17
|
+
"plugin:@typescript-eslint/recommended"
|
|
17
18
|
],
|
|
18
19
|
"rules": {
|
|
19
|
-
|
|
20
|
-
"error",
|
|
21
|
-
2
|
|
22
|
-
],
|
|
23
|
-
"linebreak-style": [
|
|
24
|
-
2,
|
|
25
|
-
"unix"
|
|
26
|
-
],
|
|
27
|
-
"quotes": [
|
|
28
|
-
2,
|
|
29
|
-
"single"
|
|
30
|
-
],
|
|
31
|
-
"semi": [
|
|
32
|
-
2,
|
|
33
|
-
"never"
|
|
34
|
-
],
|
|
35
|
-
"comma-spacing": [
|
|
36
|
-
2,
|
|
37
|
-
{ "before": false, "after": true }
|
|
38
|
-
]
|
|
20
|
+
"@typescript-eslint/ban-types": "off"
|
|
39
21
|
}
|
|
40
22
|
}
|
package/README.md
CHANGED
|
@@ -52,7 +52,7 @@ Usage:
|
|
|
52
52
|
```javascript
|
|
53
53
|
|
|
54
54
|
<LazyComponent>
|
|
55
|
-
|
|
55
|
+
<ComponentToLoadWhenInViewport>
|
|
56
56
|
</LazyComponent>
|
|
57
57
|
|
|
58
58
|
```
|
|
@@ -98,28 +98,28 @@ var LazyFrame = require('lazy-react').LazyFrame
|
|
|
98
98
|
var LazyComponent = require('lazy-react').LazyComponent
|
|
99
99
|
|
|
100
100
|
class Example extends React.Component {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
101
|
+
constructor(props) {
|
|
102
|
+
super(props)
|
|
103
|
+
}
|
|
104
|
+
render() {
|
|
105
|
+
return <div>
|
|
106
|
+
<LazyBackgroundImage
|
|
107
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
108
|
+
className="fill"
|
|
109
|
+
/>
|
|
110
|
+
<LazyImage
|
|
111
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
112
|
+
offset={100}
|
|
113
|
+
/>
|
|
114
|
+
<LazyFrame
|
|
115
|
+
link={'http://jonathanobino.xyz'}
|
|
116
|
+
scrolling={true}
|
|
117
|
+
/>
|
|
118
|
+
<LazyComponent>
|
|
119
|
+
<ComponentToLoadWhenInViewport>
|
|
120
|
+
</LazyComponent>
|
|
121
|
+
</div>
|
|
122
|
+
}
|
|
123
123
|
}
|
|
124
124
|
```
|
|
125
125
|
|
|
@@ -139,17 +139,17 @@ Usage
|
|
|
139
139
|
import useIsInViewport from 'lazy-react'
|
|
140
140
|
|
|
141
141
|
function Example(props) {
|
|
142
|
-
|
|
142
|
+
const [setRef, link, isVisible] = useIsInViewport(props)
|
|
143
143
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
144
|
+
if(!isVisible){
|
|
145
|
+
return <Placeholder />
|
|
146
|
+
}
|
|
147
147
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
148
|
+
return <div ref={(node)=>{
|
|
149
|
+
setRef(node)
|
|
150
|
+
}}>
|
|
151
|
+
<Content/>
|
|
152
|
+
</div>
|
|
153
153
|
|
|
154
154
|
}
|
|
155
155
|
|
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){
|
|
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));let c=[];const 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.push(e),0===u.isListenerAttached&&(u.isListenerAttached=window.requestAnimationFrame(u.eventHandler))},eventHandler:function(){0===c.length?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=c.filter((t=>t!==e))},isListenerAttached:0};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"mJAGe,SAAAA,EAA6BC,GAC1C,
|
|
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\nlet elements: 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.push(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.length === 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 = elements.filter((elem) => elem !== toRemove)\n },\n isListenerAttached: 0, // intended as not set\n}\n\nexport { CheckIfRender }\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$export$8ed7e1fb47d2eef9","addElement","removeElementFromList","$03b515f3f8c77d8f$var$elements","isInViewPort","top","left","window","innerHeight","innerWidth","calculateNewPosition","elem","getBoundingClientRect","push","isListenerAttached","requestAnimationFrame","eventHandler","length","removeScrollHandler","forEach","cancelAnimationFrame","toRemove","filter"],"version":3,"file":"index.js.map"}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lazy-react",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.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",
|
|
7
7
|
"scripts": {
|
|
8
|
+
"start": "parcel serve ./src/demo/index.html --dist-dir ./demo",
|
|
9
|
+
"build": "parcel build",
|
|
8
10
|
"lint": "eslint src/*",
|
|
9
11
|
"lint:fix": "eslint --fix src/*",
|
|
10
12
|
"format": "prettier --write --single-quote --no-semi ./src/*.tsx",
|
|
11
13
|
"precommit": "lint-staged",
|
|
12
|
-
"test": "jest"
|
|
13
|
-
"build": "parcel build",
|
|
14
|
-
"serve": "parcel serve ./src/demo/index.html --dist-dir ./demo"
|
|
14
|
+
"test": "jest"
|
|
15
15
|
},
|
|
16
16
|
"targets": {
|
|
17
17
|
"main": {
|
|
@@ -40,12 +40,15 @@
|
|
|
40
40
|
"@types/node": "^17.0.21",
|
|
41
41
|
"@types/react": "^17.0.43",
|
|
42
42
|
"@types/react-dom": "^17.0.14",
|
|
43
|
-
"eslint": "^
|
|
44
|
-
"eslint
|
|
43
|
+
"@typescript-eslint/eslint-plugin": "^5.35.1",
|
|
44
|
+
"@typescript-eslint/parser": "^5.35.1",
|
|
45
|
+
"eslint": "^7.32.0",
|
|
46
|
+
"eslint-config-prettier": "^8.5.0",
|
|
47
|
+
"eslint-plugin-react": "^7.30.1",
|
|
45
48
|
"husky": "^4.3.0",
|
|
46
49
|
"jest": "^27.5.1",
|
|
47
50
|
"lint-staged": "^10.4.0",
|
|
48
|
-
"parcel": "^2.
|
|
51
|
+
"parcel": "^2.7.0",
|
|
49
52
|
"prettier": "^2.1.2",
|
|
50
53
|
"process": "^0.11.10"
|
|
51
54
|
},
|
package/src/demo/index.js
CHANGED
|
@@ -1,70 +1,60 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
import ReactDOM from 'react-dom'
|
|
3
|
-
import {LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent} from '../../dist'
|
|
3
|
+
import { LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent } from '../../dist'
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
return <h1> I'm lazy loaded!</h1>
|
|
5
|
+
function Experimental (){
|
|
6
|
+
return <h1> I’m lazy loaded!</h1>
|
|
8
7
|
}
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
offset={100}
|
|
48
|
-
className={'test'}
|
|
49
|
-
preserveAspect={false}
|
|
50
|
-
/>
|
|
51
|
-
<LazyBackgroundImage
|
|
52
|
-
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
53
|
-
className="fill"
|
|
54
|
-
/>
|
|
9
|
+
function Demo() {
|
|
10
|
+
return <div>
|
|
11
|
+
<h2>Just scroll down</h2>
|
|
12
|
+
<div style={{
|
|
13
|
+
minHeight: '100vh',
|
|
14
|
+
minWidth: '100vw',
|
|
15
|
+
backgroundColor: 'tomato'
|
|
16
|
+
}}></div>
|
|
17
|
+
<LazyImage
|
|
18
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
19
|
+
offset={0}
|
|
20
|
+
/>
|
|
21
|
+
<LazyImage
|
|
22
|
+
link={'https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=44828cfc286e8eb8cd0ed2ca561f8cb9'}
|
|
23
|
+
offset={100}
|
|
24
|
+
className={'styledImage'}
|
|
25
|
+
/>
|
|
26
|
+
<LazyImage
|
|
27
|
+
link={'https://images.unsplash.com/photo-1472132858735-6313c7962473?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f38318ed6adee6db020705bedf6d6e10'}
|
|
28
|
+
offset={100}
|
|
29
|
+
/>
|
|
30
|
+
<LazyImage
|
|
31
|
+
link={'https://images.unsplash.com/photo-1469899324414-c72bfb4d4161?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=8d708d646e3b2d32c5faf67e01919872'}
|
|
32
|
+
offset={100}
|
|
33
|
+
className={'test'}
|
|
34
|
+
preserveAspect={false}
|
|
35
|
+
/>
|
|
36
|
+
<LazyImage
|
|
37
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
38
|
+
offset={100}
|
|
39
|
+
className={'test'}
|
|
40
|
+
preserveAspect={false}
|
|
41
|
+
/>
|
|
42
|
+
<LazyBackgroundImage
|
|
43
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
44
|
+
className="fill"
|
|
45
|
+
/>
|
|
55
46
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
47
|
+
<LazyComponent>
|
|
48
|
+
<Experimental />
|
|
49
|
+
<Experimental />
|
|
50
|
+
<Experimental />
|
|
51
|
+
</LazyComponent>
|
|
61
52
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
53
|
+
<LazyFrame
|
|
54
|
+
link={'http://jonathanobino.xyz'}
|
|
55
|
+
scrolling={'true'}
|
|
56
|
+
/>
|
|
57
|
+
</div>
|
|
68
58
|
}
|
|
69
59
|
|
|
70
|
-
ReactDOM.render(<Demo/>,document.getElementById('app'))
|
|
60
|
+
ReactDOM.render(<Demo/>, document.getElementById('app'))
|
|
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' // eslint-disable-line no-unu
|
|
|
2
2
|
import useIsInViewPort from './index'
|
|
3
3
|
|
|
4
4
|
export default function LazyBackgroundImage(props: any) {
|
|
5
|
-
|
|
5
|
+
const [setRef, link, isViewable] = useIsInViewPort(props)
|
|
6
6
|
|
|
7
7
|
const [style, setStyle] = useState({
|
|
8
8
|
backgroundImage: `url(${link})`,
|
package/src/lazyLoadFrame.tsx
CHANGED
|
@@ -2,7 +2,7 @@ import React from 'react' // eslint-disable-line no-unused-vars
|
|
|
2
2
|
import useIsInViewPort from './index'
|
|
3
3
|
|
|
4
4
|
export default function LazyFrame(props: any) {
|
|
5
|
-
|
|
5
|
+
const [setRef, link] = useIsInViewPort(props)
|
|
6
6
|
|
|
7
7
|
return (
|
|
8
8
|
<iframe
|
package/src/useIsInViewport.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useState, useEffect, useMemo, useCallback } from 'react' // eslint-disable-line no-unused-vars
|
|
2
2
|
|
|
3
3
|
interface InstanceElement {
|
|
4
4
|
makeItVisible: () => void
|
|
@@ -13,7 +13,7 @@ export default function useRenderIfInViewPort(props: {
|
|
|
13
13
|
const [link, setLink] = useState('')
|
|
14
14
|
const [visible, setVisible] = useState(false)
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
const [ref, setRef] = useState(null)
|
|
17
17
|
|
|
18
18
|
const thisInstance = useMemo(() => {
|
|
19
19
|
return {
|
|
@@ -28,8 +28,7 @@ export default function useRenderIfInViewPort(props: {
|
|
|
28
28
|
}, [])
|
|
29
29
|
|
|
30
30
|
function makeItVisible() {
|
|
31
|
-
if(props.link)
|
|
32
|
-
setLink(() => props.link)
|
|
31
|
+
if (props.link) setLink(() => props.link)
|
|
33
32
|
setVisible(() => true)
|
|
34
33
|
}
|
|
35
34
|
|
|
@@ -89,7 +88,7 @@ const CheckIfRender = {
|
|
|
89
88
|
if (elements.length === 0) {
|
|
90
89
|
CheckIfRender.removeScrollHandler()
|
|
91
90
|
} else {
|
|
92
|
-
elements.forEach((elem
|
|
91
|
+
elements.forEach((elem) => {
|
|
93
92
|
const haveToShow = CheckIfRender.isInViewPort(
|
|
94
93
|
CheckIfRender.calculateNewPosition(elem)
|
|
95
94
|
)
|