lazy-react 3.3.0 → 3.5.0

package/.codeclimate.yml

@@ -3,9 +3,9 @@ engines:
     enabled: false
   eslint:
     enabled: true
-    channel: "eslint-3"
+    channel: "eslint-7"
     config:
       config: .eslintrc
 exclude_paths:
   - dist/
-  - demo/
+  - src/demo/

package/.eslintrc

@@ -4,37 +4,25 @@
     "es6": true,
     "node": true
   },
-  "extends": "eslint:recommended",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "jsx": true
-    },
-    "sourceType": "module"
-  },
+  "root": true,
+  "parser": "@typescript-eslint/parser",
   "plugins": [
-    "react"
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
-  "indent": [
-    "error",
-     2
-   ],
-    "linebreak-style": [
-      2,
-      "unix"
-    ],
-    "quotes": [
-      2,
-      "single"
-    ],
-    "semi": [
-      2,
-      "never"
-    ],
-    "comma-spacing": [
-      2, 
-      { "before": false, "after": true }
-    ]
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

package/README.md

@@ -52,7 +52,7 @@ Usage:
 ```javascript
 
 <LazyComponent>
-	<ComponentToLoadWhenInViewport>
+  <ComponentToLoadWhenInViewport>
 </LazyComponent>
 
 ```
@@ -90,7 +90,7 @@ style  | Object | html style attribute |  | {width:'100%'}
 
 ```javascript
 //with es6
-import {LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent} from 'lazy-react'
+import { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent } from 'lazy-react'
 //with es5
 var LazyBackgroundImage = require('lazy-react').LazyBackgroundImage
 var LazyImage = require('lazy-react').LazyImage
@@ -98,28 +98,28 @@ var LazyFrame = require('lazy-react').LazyFrame
 var LazyComponent = require('lazy-react').LazyComponent
 
 class Example extends React.Component {
-	constructor(props) {
-		super(props)
-	}
-	render() {
-		return <div>
-			<LazyBackgroundImage
-				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
-				className="fill"
-			/>
-			<LazyImage
-				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
-				offset={100}
-			/>
-			<LazyFrame
-				link={'http://jonathanobino.xyz'}
-				scrolling={true}
-			/>
-			<LazyComponent>
-				<ComponentToLoadWhenInViewport>
-			</LazyComponent>
-		</div>
-	}
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    return <div>
+      <LazyBackgroundImage
+        link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
+        className="fill"
+      />
+      <LazyImage
+        link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
+        offset={100}
+      />
+      <LazyFrame
+        link={'http://jonathanobino.xyz'}
+        scrolling={true}
+      />
+      <LazyComponent>
+        <ComponentToLoadWhenInViewport>
+      </LazyComponent>
+    </div>
+  }
 }
 ```
 
@@ -128,7 +128,7 @@ class Example extends React.Component {
 Since version 3.x there is an hook available named 'useIsInViewport' that exposes 3 elements:
 
 - setRef: used to set the ref of the dom that has to be in the viewport
-- link: the passed link. It's equal to '' until the element is in the specified viewport
+- link: the passed link. It's equal to an empty string until the element is in the specified viewport
 - isVisible: it's false until the element is in the specified viewport
 
 
@@ -138,18 +138,18 @@ Usage
 
 import useIsInViewport from 'lazy-react'
 
-function Example(props) {
-	const [setRef, link, isVisible] = useIsInViewport(props)
+function Example({link, offset}) {
+  const [setRef, link, isVisible] = useIsInViewport({link, offset})
 
-	if(!isVisible){
-		return <Placeholder />
-	}
+  if(!isVisible){
+    return <Placeholder />
+  }
 
-	return <div ref={(node)=>{
-		setRef(node)
-	}}>
-		<Content/>
-	</div>
+  return <div ref={(node)=>{
+    setRef(node)
+  }}>
+    <Content/>
+  </div>
 
 }
 

package/dist/index.js

@@ -1 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.LazyReact=t(require("react")):e.LazyReact=t(e.React)}(self,(e=>(()=>{"use strict";var t={787:t=>{t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var l=n[e]={exports:{}};return t[e](l,l.exports,r),l.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{r.r(o),r.d(o,{LazyBackgroundImage:()=>n,LazyComponent:()=>i,LazyFrame:()=>a,LazyImage:()=>l,default:()=>s});var e=r(787),t=r.n(e);function n(n){let[r,o,l]=s(n);const[a,i]=(0,e.useState)(Object.assign({backgroundImage:`url(${o})`},n.style));return(0,e.useEffect)((()=>{i(Object.assign({backgroundImage:`url(${o})`},n.style))}),[o,l]),t().createElement("div",{className:n.className,style:a,ref:e=>{r(e)}},n.children)}function l(e){const[n,r]=s(e);return t().createElement("div",{ref:e=>{n(e)}},t().createElement("img",{src:r,alt:e.alt,style:e.style,className:e.className}))}function a(e){let[n,r]=s(e);return t().createElement("iframe",Object.assign({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 i(e){const[n,r,o]=s(e);return o?t().createElement("div",null,e.children):t().createElement("div",{ref:e=>{n(e)},style:Object.assign({height:"300px",width:"300px"},e.style)})}function s(t){const[n,r]=(0,e.useState)(""),[o,l]=(0,e.useState)(!1);let[a,i]=(0,e.useState)(null);const s=(0,e.useMemo)((()=>({element:a,makeItVisible:d,offset:t.offset||100})),[a,t]),c=(0,e.useCallback)((e=>{null!==e&&i(e)}),[]);function d(){t.link&&r((()=>t.link)),l((()=>!0))}return(0,e.useEffect)((()=>(null!==a&&u.addElement(s),()=>u.removeElementFromList(s))),[a]),[c,n,o]}let c=[];const u={isInViewPort:({offset:e,top:t,left:n})=>t<window.innerHeight+e&&n<window.innerWidth+e,calculateNewPosition:e=>{var t;const{top:n,left:r}=(null===(t=e.element)||void 0===t?void 0:t.getBoundingClientRect())||{top:0,left:0};return Object.assign(Object.assign({},e),{top:n,left:r})},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,t)=>{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}})(),o})()));
+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};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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

@@ -1,18 +1,23 @@
 {
   "name": "lazy-react",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "components to lazy load iframes, images and images as backgrounds",
+  "source": "./src/index.tsx",
   "main": "./dist/index.js",
   "scripts": {
-    "build:release": "webpack",
-    "build:demo": "webpack --config webpack.config.demo.js",
-    "build": "npm run build:release && npm run build:demo",
+    "start": "parcel serve ./src/demo/index.html --dist-dir ./demo",
+    "build": "parcel build",
     "lint": "eslint src/*",
     "lint:fix": "eslint --fix src/*",
     "format": "prettier --write  --single-quote --no-semi ./src/*.tsx",
     "precommit": "lint-staged",
     "test": "jest"
   },
+  "targets": {
+    "main": {
+      "optimize": true
+    }
+  },
   "lint-staged": {
     "src/*.js": [
       "prettier --write --single-quote --no-semi",
@@ -35,22 +40,20 @@
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "eslint": "^7.10.0",
-    "eslint-plugin-react": "^7.21.3",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.30.1",
     "husky": "^4.3.0",
     "jest": "^27.5.1",
     "lint-staged": "^10.4.0",
+    "parcel": "^2.7.0",
     "prettier": "^2.1.2",
-    "ts-loader": "^9.2.7",
-    "typescript": "^4.6.2",
-    "webpack": "^5.66.0",
-    "webpack-cli": "^4.9.1"
-  },
-  "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "process": "^0.11.10"
   },
   "peerDependencies": {
+    "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }
 }

package/{demo → src/demo}/index.html

@@ -34,6 +34,6 @@
 </head>
 <body>
 	<div id="app"></div>
-	<script type="text/javascript" src="index.js"></script>
+	<script type="module" src="index.js"></script>
 </body>
 </html>

package/src/demo/index.js

@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent } from '../../dist'
+
+function Experimental (){
+  return <h1> I&rsquo;m lazy loaded!</h1>
+}
+
+function Demo() {
+  return <div>
+    <h2>Just scroll down</h2>
+    <div style={{
+      minHeight: '100vh',
+      minWidth: '100vw',
+      backgroundColor: 'tomato'
+    }}></div>
+    <LazyImage
+      link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
+      offset={0}
+    />
+    <LazyImage
+      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'}
+      offset={100}
+      className={'styledImage'}
+    />
+    <LazyImage
+      link={'https://images.unsplash.com/photo-1472132858735-6313c7962473?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f38318ed6adee6db020705bedf6d6e10'}
+      offset={100}
+    />
+    <LazyImage
+      link={'https://images.unsplash.com/photo-1469899324414-c72bfb4d4161?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=8d708d646e3b2d32c5faf67e01919872'}
+      offset={100}
+      className={'test'}
+      preserveAspect={false}
+    />
+    <LazyImage
+      link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
+      offset={100}
+      className={'test'}
+      preserveAspect={false}
+    />
+    <LazyBackgroundImage
+      link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
+      className="fill"
+    />
+
+    <LazyComponent>
+      <Experimental />
+      <Experimental />
+      <Experimental />
+    </LazyComponent>
+
+    <LazyFrame
+      link={'http://jonathanobino.xyz'}
+      scrolling={'true'}
+    />
+  </div>
+}
+
+ReactDOM.render(<Demo/>, document.getElementById('app'))

package/src/lazyLoadBackgroundImage.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' // eslint-disable-line no-unu
 import useIsInViewPort from './index'
 
 export default function LazyBackgroundImage(props: any) {
-  let [setRef, link, isViewable] = useIsInViewPort(props)
+  const [setRef, link, isViewable] = useIsInViewPort(props)
 
   const [style, setStyle] = useState({
     backgroundImage: `url(${link})`,

package/src/lazyLoadFrame.tsx

@@ -2,7 +2,7 @@ import React from 'react' // eslint-disable-line no-unused-vars
 import useIsInViewPort from './index'
 
 export default function LazyFrame(props: any) {
-  let [setRef, link] = useIsInViewPort(props)
+  const [setRef, link] = useIsInViewPort(props)
 
   return (
     <iframe

package/src/useIsInViewport.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react' // eslint-disable-line no-unused-vars
+import { useState, useEffect, useMemo, useCallback } from 'react' // eslint-disable-line no-unused-vars
 
 interface InstanceElement {
   makeItVisible: () => void
@@ -13,7 +13,7 @@ export default function useRenderIfInViewPort(props: {
   const [link, setLink] = useState('')
   const [visible, setVisible] = useState(false)
 
-  let [ref, setRef] = useState(null)
+  const [ref, setRef] = useState(null)
 
   const thisInstance = useMemo(() => {
     return {
@@ -28,8 +28,7 @@ export default function useRenderIfInViewPort(props: {
   }, [])
 
   function makeItVisible() {
-    if(props.link)
-      setLink(() => props.link)
+    if (props.link) setLink(() => props.link)
     setVisible(() => true)
   }
 
@@ -46,7 +45,7 @@ export default function useRenderIfInViewPort(props: {
 }
 
 // array with all the elements that are waiting to be shown in the viewport
-let elements: InstanceElement[] = []
+const elements = new Set<InstanceElement>()
 
 const CheckIfRender = {
   // top: the position of the element in relation with the top of the browser
@@ -76,7 +75,7 @@ const CheckIfRender = {
   },
   addElement: function (element: InstanceElement) {
     //the distance from the pixel 0,0 and the top of the element
-    elements.push(element)
+    elements.add(element)
     //check if has already been started the rAF cycle
     if (CheckIfRender.isListenerAttached === 0) {
       CheckIfRender.isListenerAttached = window.requestAnimationFrame(
@@ -86,10 +85,10 @@ const CheckIfRender = {
   },
   eventHandler: function () {
     //if there is no more element to lazy load remove the listener/rAF
-    if (elements.length === 0) {
+    if (elements.size === 0) {
       CheckIfRender.removeScrollHandler()
     } else {
-      elements.forEach((elem, i) => {
+      elements.forEach((elem) => {
         const haveToShow = CheckIfRender.isInViewPort(
           CheckIfRender.calculateNewPosition(elem)
         )
@@ -111,9 +110,7 @@ const CheckIfRender = {
   },
   //When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded
   removeElementFromList: function (toRemove: InstanceElement) {
-    elements = elements.filter((elem) => elem !== toRemove)
+    elements.delete(toRemove)
   },
   isListenerAttached: 0, // intended as not set
 }
-
-export { CheckIfRender }

package/demo/demo.js

@@ -1,70 +0,0 @@
-import React, {Component} from 'react'
-import ReactDOM from 'react-dom'
-import {LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent} from '../dist'
-
-
-function Experimental (props){
-	return <h1> I'm lazy loaded!</h1>
-}
-
-class Demo extends Component {
-	constructor(props) {
-		super(props)
-	}
-
-	render() {
-		let style = {
-			minHeight:'100vh'
-		}
-		return <div>
-			<h2>Just scroll</h2>
-			<div style={{
-				minHeight: '100vh',
-				minWidth: '100vw',
-				backgroundColor: 'tomato'
-			}}></div>
-			<LazyImage
-				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
-				offset={0}
-			/>
-			<LazyImage
-				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'}
-				offset={100}
-				className={'styledImage'}
-			/>
-			<LazyImage
-				link={'https://images.unsplash.com/photo-1472132858735-6313c7962473?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f38318ed6adee6db020705bedf6d6e10'}
-				offset={100}
-			/>
-			<LazyImage
-				link={'https://images.unsplash.com/photo-1469899324414-c72bfb4d4161?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=8d708d646e3b2d32c5faf67e01919872'}
-				offset={100}
-				className={'test'}
-				preserveAspect={false}
-			/>
-			<LazyImage
-				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
-				offset={100}
-				className={'test'}
-				preserveAspect={false}
-			/>
-			<LazyBackgroundImage
-				link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
-				className="fill"
-			/>
-
-			<LazyComponent>
-				<Experimental />
-				<Experimental />
-				<Experimental />
-			</LazyComponent>
-
-			<LazyFrame
-				link={'http://jonathanobino.xyz'}
-				scrolling={'true'}
-			/>
-		</div>
-	}
-}
-
-ReactDOM.render(<Demo/>,document.getElementById('app'))