lazy-react 3.6.0 → 3.6.2

package/README.md

@@ -162,3 +162,7 @@ The required props that have to be passed to the hooks are:
 ## Contributing
 
 Pull requests for bug fixes, new features, and improvements are welcomed.
+
+## Changelog
+
+ - 3.6.0: upgrade to react 18.3

package/biome.json

@@ -0,0 +1,18 @@
+{
+  "files": {
+      "includes": ["**", "!dist", "!**/dist", "!demo"]
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+       "semicolons": "asNeeded"
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "off"
+      }
+    }
+  }
+}

package/dist/index.js

@@ -1,2 +1,2 @@
-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};
+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,s]=u(e),[i,o]=(0,n.useState)({backgroundImage:`url(${l})`,...e.style});return(0,n.useEffect)((()=>{s&&o({backgroundImage:`url(${l})`,...e.style})}),[l,s,e.style]),(0,t.jsx)("div",{className:e.className,style:i,ref:e=>{r(e)},children:e.children})}function s(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 i(e){const[n,r]=u(e);return(0,t.jsx)("iframe",{src:r,ref:e=>{n(e)},...e,height:e.height||"500",allowFullScreen:e.allowFullScreen||!0})}function o(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",(()=>s)),r(module.exports,"LazyFrame",(()=>i)),r(module.exports,"LazyComponent",(()=>o));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:e=>{a.add(e),0===c.isListenerAttached&&(c.isListenerAttached=window.requestAnimationFrame(c.eventHandler))},eventHandler:()=>{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:()=>{window.cancelAnimationFrame(c.isListenerAttached),c.isListenerAttached=0},removeElementFromList:e=>{a.delete(e)},isListenerAttached:0};function u(e){const[t,r]=(0,n.useState)(""),[l,s]=(0,n.useState)(!1),[i,o]=(0,n.useState)(null),a=(0,n.useCallback)((()=>{e.link&&r((()=>e.link)),s((()=>!0))}),[e.link]),u=(0,n.useMemo)((()=>({element:i,makeItVisible:a,offset:e.offset||100})),[i,e.offset,a]),d=(0,n.useCallback)((e=>{null!==e&&o(e)}),[]);return(0,n.useEffect)((()=>(null!==i&&c.addElement(u),()=>c.removeElementFromList(u))),[i,u]),[d,t,l]}
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"}
+{"mappings":"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","sources":["src/lazyLoadBackgroundImage.tsx","src/lazyLoadImage.tsx","src/lazyLoadFrame.tsx","src/lazyLoadComponent.tsx","src/useIsInViewport.tsx"],"sourcesContent":["import { useState, useEffect, type ReactNode } from 'react'\nimport useIsInViewPort from './index'\n\ninterface LazyBackgroundImageProps {\n\tlink: string\n\toffset: number\n\tstyle: object\n\tclassName: string\n\tchildren: ReactNode,\n}\n\nexport default function LazyBackgroundImage(props: LazyBackgroundImageProps) {\n\tconst [setRef, link, isViewable] = useIsInViewPort(props)\n\n\tconst [style, setStyle] = useState({\n\t\tbackgroundImage: `url(${link})`,\n\t\t...props.style,\n\t})\n\n\tuseEffect(() => {\n\t\tisViewable\n\t\t\t? setStyle({\n\t\t\t\t\tbackgroundImage: `url(${link})`,\n\t\t\t\t\t...props.style,\n\t\t\t\t})\n\t\t\t: null\n\t}, [link, isViewable, props.style])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={props.className}\n\t\t\tstyle={style}\n\t\t\tref={(node) => {\n\t\t\t\tsetRef(node)\n\t\t\t}}\n\t\t>\n\t\t\t{props.children}\n\t\t</div>\n\t)\n}\n","import useIsInViewPort from './index'\n\ninterface LazyImageProps {\n  link: string,\n  offset: number,\n  alt: string,\n  style: object,\n  className: string\n}\n\nexport default function LazyImage(props: LazyImageProps) {\n\tconst [setRef, link] = useIsInViewPort(props)\n\n\treturn (\n\t\t<div\n\t\t\tref={(node) => {\n\t\t\t\tsetRef(node)\n\t\t\t}}\n\t\t>\n\t\t\t<img\n\t\t\t\tsrc={link}\n\t\t\t\talt={props.alt}\n\t\t\t\tstyle={props.style}\n\t\t\t\tclassName={props.className}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n","import useIsInViewPort from './index'\n\ninterface LazyFrameProps {\n\theight: number\n\tlink: string\n\toffset: number\n\tallowFullScreen: boolean,\n}\n\nexport default function LazyFrame(props: LazyFrameProps) {\n\tconst [setRef, link] = useIsInViewPort(props)\n\n\treturn (\n\t\t<iframe\n\t\t\t// scrolling={props.scrolling || 'no'}\n\t\t\tsrc={link}\n\t\t\t// frameBorder={props.frameBorder || 'no'}\n\t\t\t// style={props.style || {border: props.frameBorder}}\n\t\t\tref={(node) => {\n\t\t\t\tsetRef(node)\n\t\t\t}}\n\t\t\t{...props}\n\t\t\theight={props.height || '500'}\n\t\t\tallowFullScreen={props.allowFullScreen || true}\n\t\t/>\n\t)\n}\n","import type { ReactNode } from 'react'\nimport useIsInViewport from './index'\n\ninterface LazyComponentProps {\n  link: string,\n  offset: number,\n  style: object,\n  children: ReactNode\n}\n\nexport default function LazyComponent(props: LazyComponentProps) {\n\tconst [setRef, _, isVisible] = useIsInViewport(props)\n\n\tif (!isVisible)\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(node) => {\n\t\t\t\t\tsetRef(node)\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\theight: '300px',\n\t\t\t\t\twidth: '300px',\n\t\t\t\t\t...props.style,\n\t\t\t\t}}\n\t\t\t></div>\n\t\t)\n\n\treturn <div>{props.children}</div>\n}\n","import { useState, useEffect, useMemo, useCallback } from 'react'\n\ninterface InstanceElement {\n\tmakeItVisible: () => void\n\telement: HTMLElement | null\n\toffset: 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\t// top: the position of the element in relation with the top of the browser\n\t// left: the position of the element in relation with the left of the browser\n\t// offset: the desired offset of the element in relation of the viewport\n\tisInViewPort: ({\n\t\toffset,\n\t\ttop,\n\t\tleft,\n\t}: {\n\t\toffset: number\n\t\ttop: number\n\t\tleft: number\n\t}) => top < window.innerHeight + offset && left < window.innerWidth + offset,\n\n\tcalculateNewPosition: (elem: InstanceElement) => {\n\t\tconst { top, left } = elem.element?.getBoundingClientRect() || {\n\t\t\ttop: 0,\n\t\t\tleft: 0,\n\t\t}\n\n\t\treturn {\n\t\t\t...elem,\n\t\t\ttop,\n\t\t\tleft,\n\t\t}\n\t},\n\taddElement: (element: InstanceElement) => {\n\t\t//the distance from the pixel 0,0 and the top of the element\n\t\telements.add(element)\n\t\t//check if has already been started the rAF cycle\n\t\tif (CheckIfRender.isListenerAttached === 0) {\n\t\t\tCheckIfRender.isListenerAttached = window.requestAnimationFrame(\n\t\t\t\tCheckIfRender.eventHandler,\n\t\t\t)\n\t\t}\n\t},\n\teventHandler: () => {\n\t\t//if there is no more element to lazy load remove the listener/rAF\n\t\tif (elements.size === 0) {\n\t\t\tCheckIfRender.removeScrollHandler()\n\t\t} else {\n\t\t\telements.forEach((elem) => {\n\t\t\t\tconst haveToShow = CheckIfRender.isInViewPort(\n\t\t\t\t\tCheckIfRender.calculateNewPosition(elem),\n\t\t\t\t)\n\t\t\t\tif (haveToShow) {\n\t\t\t\t\telem.makeItVisible()\n\t\t\t\t\t// remove element from the list of elements to lazy load\n\t\t\t\t\tCheckIfRender.removeElementFromList(elem)\n\t\t\t\t}\n\t\t\t})\n\t\t\tCheckIfRender.isListenerAttached = window.requestAnimationFrame(\n\t\t\t\tCheckIfRender.eventHandler,\n\t\t\t)\n\t\t}\n\t},\n\n\tremoveScrollHandler: () => {\n\t\twindow.cancelAnimationFrame(CheckIfRender.isListenerAttached)\n\t\tCheckIfRender.isListenerAttached = 0\n\t},\n\t//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded\n\tremoveElementFromList: (toRemove: InstanceElement) => {\n\t\telements.delete(toRemove)\n\t},\n\tisListenerAttached: 0, // intended as not set\n}\n\nexport default function useRenderIfInViewPort(props: {\n\tlink: string\n\toffset: number\n}): [(node: HTMLDivElement | null) => void, string, boolean] {\n\tconst [link, setLink] = useState('')\n\tconst [visible, setVisible] = useState(false)\n\n\tconst [ref, setRef] = useState<HTMLDivElement | null>(null)\n\n\tconst makeItVisible = useCallback(() => {\n\t\tif (props.link) setLink(() => props.link)\n\t\tsetVisible(() => true)\n\t}, [props.link])\n\n\tconst thisInstance = useMemo(() => {\n\t\treturn {\n\t\t\telement: ref,\n\t\t\tmakeItVisible,\n\t\t\toffset: props.offset || 100,\n\t\t}\n\t}, [ref, props.offset, makeItVisible])\n\n\tconst getRef = useCallback((node: HTMLDivElement | null) => {\n\t\tif (node !== null) setRef(node)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tif (ref !== null)\n\t\t\t// add the element to the array of elements that are waiting to be lazy loaded\n\t\t\tCheckIfRender.addElement(thisInstance)\n\t\treturn () =>\n\t\t\t// if the element is unloaded remove the element from the list of elements that needs to be lazy loader\n\t\t\tCheckIfRender.removeElementFromList(thisInstance)\n\t}, [ref, thisInstance])\n\n\treturn [getRef, link, visible]\n}\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","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","useCallback","thisInstance","useMemo","getRef"],"version":3,"file":"index.js.map"}

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "lazy-react",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "description": "components to lazy load iframes, images and images as backgrounds",
   "source": "./src/index.tsx",
   "main": "./dist/index.js",
   "scripts": {
     "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",
+    "lint": "biome lint src/*",
+    "format": "biome format --write ./src/*.tsx",
     "precommit": "lint-staged",
     "test": "jest"
   },
@@ -19,8 +18,8 @@
     }
   },
   "lint-staged": {
-    "src/*.js": [
-      "prettier --write --single-quote --no-semi",
+    "src/*.jsx": [
+      "biome format",
       "git add"
     ]
   },
@@ -35,20 +34,14 @@
     "url": "https://github.com/jonathanobino/react-lazy"
   },
   "devDependencies": {
-    "@types/jest": "^27.4.1",
+    "@biomejs/biome": "2.3.11",
     "@types/node": "^17.0.21",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@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",
     "process": "^0.11.10"
   },
   "peerDependencies": {

package/src/demo/index.js

@@ -1,66 +1,81 @@
-/* eslint-disable */
-
-import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent } from '../../dist'
+import {
+	LazyImage,
+	LazyBackgroundImage,
+	LazyFrame,
+	LazyComponent,
+} from '../../dist'
 
-function Experimental (){
-  return <h1> I&rsquo;m lazy loaded!</h1>
+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"
-    />
+	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>
+			<LazyComponent>
+				<Experimental />
+				<Experimental />
+				<Experimental />
+			</LazyComponent>
 
-    <LazyFrame
-      link={'http://jonathanobino.xyz'}
-      scrolling={'true'}
-    />
-  </div>
+			<LazyFrame link={'http://jonathanobino.xyz'} scrolling={'true'} />
+		</div>
+	)
 }
 
-const container = document.getElementById('app');
-const root = createRoot(container);
-root.render(<Demo/>)
+const container = document.getElementById('app')
+const root = createRoot(container)
+root.render(<Demo />)
 
-// ReactDOM.render(<Demo/>, document.getElementById('app'))
+// ReactDOM.render(<Demo/>, document.getElementById('app'))

package/src/lazyLoadBackgroundImage.tsx

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

package/src/lazyLoadComponent.tsx

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

package/src/lazyLoadFrame.tsx

@@ -1,21 +1,27 @@
-import React from 'react' // eslint-disable-line no-unused-vars
 import useIsInViewPort from './index'
 
-export default function LazyFrame(props: any) {
-  const [setRef, link] = useIsInViewPort(props)
+interface LazyFrameProps {
+	height: number
+	link: string
+	offset: number
+	allowFullScreen: boolean,
+}
+
+export default function LazyFrame(props: LazyFrameProps) {
+	const [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}
-    />
-  )
+	return (
+		<iframe
+			// scrolling={props.scrolling || 'no'}
+			src={link}
+			// frameBorder={props.frameBorder || 'no'}
+			// style={props.style || {border: props.frameBorder}}
+			ref={(node) => {
+				setRef(node)
+			}}
+			{...props}
+			height={props.height || '500'}
+			allowFullScreen={props.allowFullScreen || true}
+		/>
+	)
 }

package/src/lazyLoadImage.tsx

@@ -1,21 +1,28 @@
-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)
+interface LazyImageProps {
+  link: string,
+  offset: number,
+  alt: string,
+  style: object,
+  className: string
+}
+
+export default function LazyImage(props: LazyImageProps) {
+	const [setRef, link] = useIsInViewPort(props)
 
-  return (
-    <div
-      ref={(node) => {
-        setRef(node)
-      }}
-    >
-      <img
-        src={link}
-        alt={props.alt}
-        style={props.style}
-        className={props.className}
-      />
-    </div>
-  )
+	return (
+		<div
+			ref={(node) => {
+				setRef(node)
+			}}
+		>
+			<img
+				src={link}
+				alt={props.alt}
+				style={props.style}
+				className={props.className}
+			/>
+		</div>
+	)
 }

package/src/useIsInViewport.tsx

@@ -1,116 +1,117 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 
 interface InstanceElement {
-  makeItVisible: () => void
-  element: HTMLElement | null
-  offset: number
+	makeItVisible: () => void
+	element: HTMLElement | null
+	offset: number
 }
 
 // array with all the elements that are waiting to be shown in the viewport
 const elements = new Set<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,
+	// 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,
-    }
+	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.add(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.size === 0) {
-      CheckIfRender.removeScrollHandler()
-    } else {
-      elements.forEach((elem) => {
-        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
-      )
-    }
-  },
+		return {
+			...elem,
+			top,
+			left,
+		}
+	},
+	addElement: (element: InstanceElement) => {
+		//the distance from the pixel 0,0 and the top of the element
+		elements.add(element)
+		//check if has already been started the rAF cycle
+		if (CheckIfRender.isListenerAttached === 0) {
+			CheckIfRender.isListenerAttached = window.requestAnimationFrame(
+				CheckIfRender.eventHandler,
+			)
+		}
+	},
+	eventHandler: () => {
+		//if there is no more element to lazy load remove the listener/rAF
+		if (elements.size === 0) {
+			CheckIfRender.removeScrollHandler()
+		} else {
+			elements.forEach((elem) => {
+				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.delete(toRemove)
-  },
-  isListenerAttached: 0, // intended as not set
+	removeScrollHandler: () => {
+		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: (toRemove: InstanceElement) => {
+		elements.delete(toRemove)
+	},
+	isListenerAttached: 0, // intended as not set
 }
 
 export default function useRenderIfInViewPort(props: {
-  link: string
-  offset: number
-}): [Function, string, boolean] {
-  const [link, setLink] = useState('')
-  const [visible, setVisible] = useState(false)
+	link: string
+	offset: number
+}): [(node: HTMLDivElement | null) => void, string, boolean] {
+	const [link, setLink] = useState('')
+	const [visible, setVisible] = useState(false)
 
-  const [ref, setRef] = useState(null)
+	const [ref, setRef] = useState<HTMLDivElement | null>(null)
 
-  const thisInstance = useMemo(() => {
-    return {
-      element: ref,
-      makeItVisible,
-      offset: props.offset || 100,
-    }
-  }, [ref, props])
+	const makeItVisible = useCallback(() => {
+		if (props.link) setLink(() => props.link)
+		setVisible(() => true)
+	}, [props.link])
 
-  const getRef = useCallback((node) => {
-    if (node !== null) setRef(node)
-  }, [])
+	const thisInstance = useMemo(() => {
+		return {
+			element: ref,
+			makeItVisible,
+			offset: props.offset || 100,
+		}
+	}, [ref, props.offset, makeItVisible])
 
-  function makeItVisible() {
-    if (props.link) setLink(() => props.link)
-    setVisible(() => true)
-  }
+	const getRef = useCallback((node: HTMLDivElement | null) => {
+		if (node !== null) setRef(node)
+	}, [])
 
-  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])
+	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, thisInstance])
 
-  return [getRef, link, visible]
+	return [getRef, link, visible]
 }
+

package/.eslintrc

@@ -1,28 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "prettier",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/no-explicit-any": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}