lazy-react 3.1.1 → 3.2.0

package/dist/index.js

@@ -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 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})()}));
+!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(){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})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazy-react",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "components to lazy load iframes, images and images as backgrounds",
   "main": "./dist/index.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "build": "npm run build:release && npm run build:demo",
     "lint": "eslint src/*",
     "lint:fix": "eslint --fix src/*",
-    "prettify": "prettier --write  --single-quote --no-semi ./src/*.js",
+    "format": "prettier --write  --single-quote --no-semi ./src/*.tsx",
     "precommit": "lint-staged",
     "test": "jest"
   },
@@ -30,20 +30,19 @@
     "url": "https://github.com/jonathanobino/react-lazy"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@types/jest": "^27.4.0",
-    "babel-cli": "^6.26.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@testing-library/react": "^12.1.4",
+    "@types/jest": "^27.4.1",
+    "@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",
     "husky": "^4.3.0",
     "jest": "^27.5.1",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2",
+    "ts-loader": "^9.2.7",
+    "typescript": "^4.6.2",
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1"
   },
@@ -52,7 +51,6 @@
     "react-dom": "^17.0.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }
 }

package/src/{index.js → index.tsx}

@@ -2,12 +2,6 @@ import LazyBackgroundImage from './lazyLoadBackgroundImage'
 import LazyImage from './lazyLoadImage'
 import LazyFrame from './lazyLoadFrame'
 import LazyComponent from './lazyLoadComponent'
-import useRenderIfInViewPort from './baseClass'
 
-export {
-  LazyBackgroundImage,
-  LazyImage,
-  LazyFrame,
-  LazyComponent,
-  useRenderIfInViewPort,
-}
+export { default } from './useIsInViewport'
+export { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent }

package/src/lazyLoadBackgroundImage.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars
+import useIsInViewPort from './index'
+
+export default function LazyBackgroundImage(props: any) {
+  let [setRef, link, isViewable] = useIsInViewPort(props)
+
+  const [style, setStyle] = useState({
+    backgroundImage: `url(${link})`,
+    ...props.style,
+  })
+
+  useEffect(() => {
+    setStyle({
+      backgroundImage: `url(${link})`,
+      ...props.style,
+    })
+  }, [link, isViewable])
+
+  return (
+    <div
+      className={props.className}
+      style={style}
+      ref={(node) => {
+        setRef(node)
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/lazyLoadComponent.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import useIsInViewport from './index'
+
+export default function LazyComponent(props: any) {
+  const [setRef, link, isVisible] = useIsInViewport(props)
+
+  if (!isVisible)
+    return (
+      <div
+        ref={(node) => {
+          setRef(node)
+        }}
+        style={{
+          height: '300px',
+          width: '300px',
+          ...props.style,
+        }}
+      ></div>
+    )
+
+  return <div>{props.children}</div>
+}

package/src/lazyLoadFrame.tsx

@@ -0,0 +1,21 @@
+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)
+
+  return (
+    <iframe
+      height={props.height || '500'}
+      scrolling={props.scrolling || 'no'}
+      src={link}
+      frameBorder={props.frameBorder || 'no'}
+      allowFullScreen={props.allowFullScreen || true}
+      style={props.style || {}}
+      ref={(node) => {
+        setRef(node)
+      }}
+      {...props}
+    />
+  )
+}

package/src/lazyLoadImage.tsx

@@ -0,0 +1,21 @@
+import React from 'react' // eslint-disable-line no-unused-vars
+import useIsInViewPort from './index'
+
+export default function LazyImage(props: any) {
+  const [setRef, link] = useIsInViewPort(props)
+
+  return (
+    <div
+      ref={(node) => {
+        setRef(node)
+      }}
+    >
+      <img
+        src={link}
+        alt={props.alt}
+        style={props.style}
+        className={props.className}
+      />
+    </div>
+  )
+}

package/src/useIsInViewport.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react' // eslint-disable-line no-unused-vars
+
+interface InstanceElement {
+  makeItVisible: () => void
+  element: HTMLElement | null
+  offset: number
+}
+
+export default function useRenderIfInViewPort(props: {
+  link: string
+  offset: number
+}): [Function, string, boolean] {
+  const [link, setLink] = useState('')
+  const [visible, setVisible] = useState(false)
+
+  let [ref, setRef] = useState(null)
+
+  const thisInstance = useMemo(() => {
+    return {
+      element: ref,
+      makeItVisible,
+      offset: props.offset || 100,
+    }
+  }, [ref, props])
+
+  const getRef = useCallback((node) => {
+    if (node !== null) setRef(node)
+  }, [])
+
+  function makeItVisible() {
+    setLink(() => props.link)
+    setVisible(() => true)
+  }
+
+  useEffect(() => {
+    if (ref !== null)
+      // add the element to the array of elements that are waiting to be lazy loaded
+      CheckIfRender.addElement(thisInstance)
+    return () =>
+      // if the element is unloaded remove the element from the list of elements that needs to be lazy loader
+      CheckIfRender.removeElementFromList(thisInstance)
+  }, [ref])
+
+  return [getRef, link, visible]
+}
+
+// array with all the elements that are waiting to be shown in the viewport
+let elements: InstanceElement[] = []
+
+const CheckIfRender = {
+  // top: the position of the element in relation with the top of the browser
+  // left: the position of the element in relation with the left of the browser
+  // offset: the desired offset of the element in relation of the viewport
+  isInViewPort: ({
+    offset,
+    top,
+    left,
+  }: {
+    offset: number
+    top: number
+    left: number
+  }) => top < window.innerHeight + offset && left < window.innerWidth + offset,
+
+  calculateNewPosition: (elem: InstanceElement) => {
+    const { top, left } = elem.element?.getBoundingClientRect() || {
+      top: 0,
+      left: 0,
+    }
+
+    return {
+      ...elem,
+      top,
+      left,
+    }
+  },
+  addElement: function (element: InstanceElement) {
+    //the distance from the pixel 0,0 and the top of the element
+    elements.push(element)
+    //check if has already been started the rAF cycle
+    if (CheckIfRender.isListenerAttached === 0) {
+      CheckIfRender.isListenerAttached = window.requestAnimationFrame(
+        CheckIfRender.eventHandler
+      )
+    }
+  },
+  eventHandler: function () {
+    //if there is no more element to lazy load remove the listener/rAF
+    if (elements.length === 0) {
+      CheckIfRender.removeScrollHandler()
+    } else {
+      elements.forEach((elem, i) => {
+        const haveToShow = CheckIfRender.isInViewPort(
+          CheckIfRender.calculateNewPosition(elem)
+        )
+        if (haveToShow) {
+          elem.makeItVisible()
+          // remove element from the list of elements to lazy load
+          CheckIfRender.removeElementFromList(elem)
+        }
+      })
+      CheckIfRender.isListenerAttached = window.requestAnimationFrame(
+        CheckIfRender.eventHandler
+      )
+    }
+  },
+
+  removeScrollHandler: function () {
+    window.cancelAnimationFrame(CheckIfRender.isListenerAttached)
+    CheckIfRender.isListenerAttached = 0
+  },
+  //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)
+  },
+  isListenerAttached: 0, // intended as not set
+}
+
+export { CheckIfRender }

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}

package/webpack.config.demo.js

@@ -11,7 +11,7 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        use: 'babel-loader',
+        use: 'ts-loader',
         exclude: /node_modules/
       }
     ]

package/webpack.config.js

@@ -1,22 +1,26 @@
-var path = require('path')
-var webpack = require('webpack')
+const path = require('path');
 
 module.exports = {
   mode:'production',
-  entry: './src/index.js',
+  entry: path.join(__dirname,'./src/index.tsx'),
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [{loader:'ts-loader'}],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts'],
+  },
   output: {
     library: 'LazyReact',
     libraryTarget: 'umd',
     path: path.join(__dirname),
     filename: './dist/index.js'
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      },
-      __DEVELOPMENT__: false
-    })],
   externals: [
     {
       react: {
@@ -35,13 +39,4 @@ module.exports = {
       }
     }
   ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/
-      }
-    ]
-  }
-}
+};

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }]
-  ]
-}

package/src/baseClass.js

@@ -1,111 +0,0 @@
-import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars
-
-export default function useRenderIfInViewPort(element, props) {
-  const [state, setState] = useState({
-    link: '',
-    visible: false,
-  })
-
-  function makeItVisible() {
-    setState({
-      visible: true,
-      link: props.link,
-    })
-  }
-
-  useEffect(() => {
-    if (element.current !== undefined)
-      CheckIfRender.addElement({
-        // add the element to the array of elements that are waiting to be lazy loaded
-        element: element.current,
-        props,
-        makeItVisible,
-      })
-    return () =>
-      CheckIfRender.removeElementFromList({
-        // if the element is unloaded remove the element from the list of elements that needs to be lazy loader
-        element: element.current,
-        props,
-        makeItVisible,
-      })
-  }, [])
-
-  return state
-}
-
-// array with all the elements that are waiting to be shown in the viewport
-const CheckIfRender = {
-  elements: [],
-}
-
-// top: the position of the element in relation with the top of the browser
-// left: the position of the element in relation with the left of the browser
-// offset: the desired offset of the element in relation of the viewport
-CheckIfRender.isInViewPort = ({ offset, top, left }) =>
-  top < window.innerHeight + offset && left < window.innerWidth + offset
-
-CheckIfRender.calculateNewPosition = (elem) => {
-  const reference = elem.element
-  const { top, left } = reference.getBoundingClientRect()
-  return {
-    ...elem,
-    top,
-    left,
-  }
-}
-
-CheckIfRender.addElement = function ({ element, props, makeItVisible }) {
-  //the distance from the pixel 0,0 and the top of the element
-  const { top, left } = element.getBoundingClientRect()
-  CheckIfRender.elements.push({
-    element,
-    top,
-    left,
-    offset: props.offset || 100,
-    makeItVisible,
-  })
-  //check if has already been started the rAF cycle
-  if (typeof CheckIfRender.isListenerAttached === 'boolean') {
-    CheckIfRender.isListenerAttached = window.requestAnimationFrame(
-      CheckIfRender.eventHandler
-    )
-  }
-}
-
-CheckIfRender.eventHandler = function () {
-  //if there is no more element to lazy load remove the listener/rAF
-  if (CheckIfRender.elements.length === 0) {
-    CheckIfRender.removeScrollHandler()
-  } else {
-    CheckIfRender.elements.forEach((elem, i) => {
-      // if element is in viewPort make it visible
-      if (CheckIfRender.isInViewPort(elem)) {
-        elem.makeItVisible()
-        // remove element from the list of elements to lazy load
-        CheckIfRender.removeElementFromList(elem)
-      } else {
-        // if the element is not shown update his position
-        CheckIfRender.elements[i] = CheckIfRender.calculateNewPosition(elem)
-      }
-    })
-    CheckIfRender.isListenerAttached = window.requestAnimationFrame(
-      CheckIfRender.eventHandler
-    )
-  }
-}
-
-CheckIfRender.removeScrollHandler = function () {
-  window.cancelAnimationFrame(CheckIfRender.isListenerAttached)
-  CheckIfRender.isListenerAttached = false
-}
-
-//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded
-CheckIfRender.removeElementFromList = function (toRemove) {
-  CheckIfRender.elements = CheckIfRender.elements.filter(
-    (elem) => elem !== toRemove
-  )
-}
-
-CheckIfRender.isListenerAttached = false
-
-export { CheckIfRender }

package/src/lazyLoadBackgroundImage.js

@@ -1,24 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyBackgroundImage(props) {
-  const ref = useRef()
-  let isViewable = useIsInViewPort(ref, props)
-  const [style, setStyle] = useState({
-    backgroundImage: `url(${isViewable.link})`,
-    ...props.style,
-  })
-
-  useEffect(() => {
-    setStyle({
-      backgroundImage: `url(${isViewable.link})`,
-      ...props.style,
-    })
-  }, [isViewable])
-
-  return (
-    <div className={props.className} style={style} ref={ref}>
-      {props.children}
-    </div>
-  )
-}

package/src/lazyLoadComponent.js

@@ -1,24 +0,0 @@
-import React, { useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyComponent(props) {
-  const ref = useRef()
-  let isViewable = useIsInViewPort(ref, props)
-
-  const placeHolder = (
-    <div
-      style={
-        props.style
-          ? props.style
-          : {
-              heigt: '300px',
-              width: '300px',
-            }
-      }
-    />
-  )
-
-  return (
-    <div ref={ref}>{isViewable.visible ? props.children : placeHolder}</div>
-  )
-}

package/src/lazyLoadFrame.js

@@ -1,20 +0,0 @@
-import React, { useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyFrame(props) {
-  const ref = useRef()
-  let isViewable = useIsInViewPort(ref, props)
-
-  return (
-    <iframe
-      height={props.height || '500'}
-      scrolling={props.scrolling || 'no'}
-      src={isViewable.link}
-      frameBorder={props.frameBorder || 'no'}
-      allowtransparency={props.allowTransparency || 'true'}
-      allowFullScreen={props.allowFullScreen || true}
-      style={props.style || {}}
-      ref={ref}
-    />
-  )
-}

package/src/lazyLoadImage.js

@@ -1,17 +0,0 @@
-import React, { useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyImage(props) {
-  const ref = useRef()
-  const isViewable = useIsInViewPort(ref, props)
-
-  return (
-    <img
-      src={isViewable.link}
-      alt={props.alt}
-      style={props.style}
-      className={props.className}
-      ref={ref}
-    />
-  )
-}