lazy-react 3.6.1 → 3.6.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Jonathan Obino
+Copyright (c) 2026 Jonathan Obino
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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]=u(e),[o,s]=(0,n.useState)({backgroundImage:`url(${l})`,...e.style});return(0,n.useEffect)((()=>{s({backgroundImage:`url(${l})`,...e.style})}),[l,i]),(0,t.jsx)("div",{className:e.className,style:o,ref:e=>{r(e)},children:e.children})}function i(e){const[n,r]=u(e);return(0,t.jsx)("div",{ref:e=>{n(e)},children:(0,t.jsx)("img",{src:r,alt:e.alt,style:e.style,className:e.className})})}function o(e){const[n,r]=u(e);return(0,t.jsx)("iframe",{height:e.height||"500",scrolling:e.scrolling||"no",src:r,frameBorder:e.frameBorder||"no",allowFullScreen:e.allowFullScreen||!0,style:e.style||{},ref:e=>{n(e)},...e})}function s(e){const[n,r,l]=u(e);return l?(0,t.jsx)("div",{children:e.children}):(0,t.jsx)("div",{ref:e=>{n(e)},style:{height:"300px",width:"300px",...e.style}})}e=module.exports,Object.defineProperty(e,"__esModule",{value:!0,configurable:!0}),r(module.exports,"default",(()=>u)),r(module.exports,"LazyBackgroundImage",(()=>l)),r(module.exports,"LazyImage",(()=>i)),r(module.exports,"LazyFrame",(()=>o)),r(module.exports,"LazyComponent",(()=>s));const a=new Set,c={isInViewPort:({offset:e,top:t,left:n})=>t<window.innerHeight+e&&n<window.innerWidth+e,calculateNewPosition:e=>{const{top:t,left:n}=e.element?.getBoundingClientRect()||{top:0,left:0};return{...e,top:t,left:n}},addElement:function(e){a.add(e),0===c.isListenerAttached&&(c.isListenerAttached=window.requestAnimationFrame(c.eventHandler))},eventHandler:function(){0===a.size?c.removeScrollHandler():(a.forEach((e=>{c.isInViewPort(c.calculateNewPosition(e))&&(e.makeItVisible(),c.removeElementFromList(e))})),c.isListenerAttached=window.requestAnimationFrame(c.eventHandler))},removeScrollHandler:function(){window.cancelAnimationFrame(c.isListenerAttached),c.isListenerAttached=0},removeElementFromList:function(e){a.delete(e)},isListenerAttached:0};function u(e){const[t,r]=(0,n.useState)(""),[l,i]=(0,n.useState)(!1),[o,s]=(0,n.useState)(null),a=(0,n.useMemo)((()=>({element:o,makeItVisible:d,offset:e.offset||100})),[o,e]),u=(0,n.useCallback)((e=>{null!==e&&s(e)}),[]);function d(){e.link&&r((()=>e.link)),i((()=>!0))}return(0,n.useEffect)((()=>(null!==o&&c.addElement(a),()=>c.removeElementFromList(a))),[o]),[u,t,l]}
+var $9w1Q4$reactjsxruntime=require("react/jsx-runtime"),$9w1Q4$react=require("react");function $parcel$defineInteropFlag(e){Object.defineProperty(e,"__esModule",{value:!0,configurable:!0})}function $parcel$export(e,t,r,$){Object.defineProperty(e,t,{get:r,set:$,enumerable:!0,configurable:!0})}function $6e38eea936045ca0$export$2e2bcd8739ae039(e){let[t,r,$]=$03b515f3f8c77d8f$export$2e2bcd8739ae039(e),[f,c]=(0,$9w1Q4$react.useState)({backgroundImage:`url(${r})`,...e.style});return(0,$9w1Q4$react.useEffect)(()=>{$&&c({backgroundImage:`url(${r})`,...e.style})},[r,$,e.style]),(0,$9w1Q4$reactjsxruntime.jsx)("div",{className:e.className,style:f,ref:e=>{t(e)},children:e.children})}function $f6f596272f209e0c$export$2e2bcd8739ae039(e){let[t,r]=$03b515f3f8c77d8f$export$2e2bcd8739ae039(e);return(0,$9w1Q4$reactjsxruntime.jsx)("div",{ref:e=>{t(e)},children:(0,$9w1Q4$reactjsxruntime.jsx)("img",{src:r,alt:e.alt,style:e.style,className:e.className,title:e.title})})}function $8e3d626f2d1eebd8$export$2e2bcd8739ae039(e){let[t,r]=$03b515f3f8c77d8f$export$2e2bcd8739ae039(e);return(0,$9w1Q4$reactjsxruntime.jsx)("iframe",{src:r,ref:e=>{t(e)},...e,height:e.height||"500",allowFullScreen:e.allowFullScreen||!0})}function $c17687259f8b5ddf$export$2e2bcd8739ae039(e){let[t,r,$]=$03b515f3f8c77d8f$export$2e2bcd8739ae039(e);return $?(0,$9w1Q4$reactjsxruntime.jsx)("div",{children:e.children}):(0,$9w1Q4$reactjsxruntime.jsx)("div",{ref:e=>{t(e)},style:{height:"300px",width:"300px",...e.style}})}$parcel$defineInteropFlag(module.exports),$parcel$export(module.exports,"default",()=>$03b515f3f8c77d8f$export$2e2bcd8739ae039),$parcel$export(module.exports,"LazyBackgroundImage",()=>$6e38eea936045ca0$export$2e2bcd8739ae039),$parcel$export(module.exports,"LazyImage",()=>$f6f596272f209e0c$export$2e2bcd8739ae039),$parcel$export(module.exports,"LazyFrame",()=>$8e3d626f2d1eebd8$export$2e2bcd8739ae039),$parcel$export(module.exports,"LazyComponent",()=>$c17687259f8b5ddf$export$2e2bcd8739ae039);const $03b515f3f8c77d8f$var$elements=new Set,$03b515f3f8c77d8f$var$CheckIfRender={isInViewPort:({offset:e,top:t,left:r})=>t<window.innerHeight+e&&r<window.innerWidth+e,calculateNewPosition:e=>{let{top:t,left:r}=e.element?.getBoundingClientRect()||{top:0,left:0};return{...e,top:t,left:r}},addElement:e=>{$03b515f3f8c77d8f$var$elements.add(e),0===$03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached&&($03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached=window.requestAnimationFrame($03b515f3f8c77d8f$var$CheckIfRender.eventHandler))},eventHandler:()=>{0===$03b515f3f8c77d8f$var$elements.size?$03b515f3f8c77d8f$var$CheckIfRender.removeScrollHandler():($03b515f3f8c77d8f$var$elements.forEach(e=>{$03b515f3f8c77d8f$var$CheckIfRender.isInViewPort($03b515f3f8c77d8f$var$CheckIfRender.calculateNewPosition(e))&&(e.makeItVisible(),$03b515f3f8c77d8f$var$CheckIfRender.removeElementFromList(e))}),$03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached=window.requestAnimationFrame($03b515f3f8c77d8f$var$CheckIfRender.eventHandler))},removeScrollHandler:()=>{window.cancelAnimationFrame($03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached),$03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached=0},removeElementFromList:e=>{$03b515f3f8c77d8f$var$elements.delete(e)},isListenerAttached:0};function $03b515f3f8c77d8f$export$2e2bcd8739ae039(e){let[t,r]=(0,$9w1Q4$react.useState)(""),[$,f]=(0,$9w1Q4$react.useState)(!1),[c,a]=(0,$9w1Q4$react.useState)(null),n=(0,$9w1Q4$react.useCallback)(()=>{e.link&&r(()=>e.link),f(()=>!0)},[e.link]),d=(0,$9w1Q4$react.useMemo)(()=>({element:c,makeItVisible:n,offset:e.offset||100}),[c,e.offset,n]),l=(0,$9w1Q4$react.useCallback)(e=>{null!==e&&a(e)},[]);return(0,$9w1Q4$react.useEffect)(()=>(null!==c&&$03b515f3f8c77d8f$var$CheckIfRender.addElement(d),()=>$03b515f3f8c77d8f$var$CheckIfRender.removeElementFromList(d)),[c,d]),[l,t,$]}
 //# 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'\n\ninterface InstanceElement {\n  makeItVisible: () => void\n  element: HTMLElement | null\n  offset: number\n}\n\n// array with all the elements that are waiting to be shown in the viewport\nconst elements = new Set<InstanceElement>()\n\nconst CheckIfRender = {\n  // top: the position of the element in relation with the top of the browser\n  // left: the position of the element in relation with the left of the browser\n  // offset: the desired offset of the element in relation of the viewport\n  isInViewPort: ({\n    offset,\n    top,\n    left,\n  }: {\n    offset: number\n    top: number\n    left: number\n  }) => top < window.innerHeight + offset && left < window.innerWidth + offset,\n\n  calculateNewPosition: (elem: InstanceElement) => {\n    const { top, left } = elem.element?.getBoundingClientRect() || {\n      top: 0,\n      left: 0,\n    }\n\n    return {\n      ...elem,\n      top,\n      left,\n    }\n  },\n  addElement: function (element: InstanceElement) {\n    //the distance from the pixel 0,0 and the top of the element\n    elements.add(element)\n    //check if has already been started the rAF cycle\n    if (CheckIfRender.isListenerAttached === 0) {\n      CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n        CheckIfRender.eventHandler\n      )\n    }\n  },\n  eventHandler: function () {\n    //if there is no more element to lazy load remove the listener/rAF\n    if (elements.size === 0) {\n      CheckIfRender.removeScrollHandler()\n    } else {\n      elements.forEach((elem) => {\n        const haveToShow = CheckIfRender.isInViewPort(\n          CheckIfRender.calculateNewPosition(elem)\n        )\n        if (haveToShow) {\n          elem.makeItVisible()\n          // remove element from the list of elements to lazy load\n          CheckIfRender.removeElementFromList(elem)\n        }\n      })\n      CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n        CheckIfRender.eventHandler\n      )\n    }\n  },\n\n  removeScrollHandler: function () {\n    window.cancelAnimationFrame(CheckIfRender.isListenerAttached)\n    CheckIfRender.isListenerAttached = 0\n  },\n  //When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded\n  removeElementFromList: function (toRemove: InstanceElement) {\n    elements.delete(toRemove)\n  },\n  isListenerAttached: 0, // intended as not set\n}\n\nexport default function useRenderIfInViewPort(props: {\n  link: string\n  offset: number\n}): [Function, string, boolean] {\n  const [link, setLink] = useState('')\n  const [visible, setVisible] = useState(false)\n\n  const [ref, setRef] = useState(null)\n\n  const thisInstance = useMemo(() => {\n    return {\n      element: ref,\n      makeItVisible,\n      offset: props.offset || 100,\n    }\n  }, [ref, props])\n\n  const getRef = useCallback((node) => {\n    if (node !== null) setRef(node)\n  }, [])\n\n  function makeItVisible() {\n    if (props.link) setLink(() => props.link)\n    setVisible(() => true)\n  }\n\n  useEffect(() => {\n    if (ref !== null)\n      // add the element to the array of elements that are waiting to be lazy loaded\n      CheckIfRender.addElement(thisInstance)\n    return () =>\n      // if the element is unloaded remove the element from the list of elements that needs to be lazy loader\n      CheckIfRender.removeElementFromList(thisInstance)\n  }, [ref])\n\n  return [getRef, link, visible]\n}\n"],"names":["$6e38eea936045ca0$export$2e2bcd8739ae039","props","setRef","link","isViewable","$03b515f3f8c77d8f$export$2e2bcd8739ae039","style","setStyle","$9w1Q4$react","useState","backgroundImage","useEffect","$9w1Q4$reactjsxruntime","jsx","className","ref","node","children","$f6f596272f209e0c$export$2e2bcd8739ae039","src","alt","$8e3d626f2d1eebd8$export$2e2bcd8739ae039","height","scrolling","frameBorder","allowFullScreen","$c17687259f8b5ddf$export$2e2bcd8739ae039","isVisible","width","$03b515f3f8c77d8f$var$elements","Set","$03b515f3f8c77d8f$var$CheckIfRender","isInViewPort","offset","top","left","window","innerHeight","innerWidth","calculateNewPosition","elem","element","getBoundingClientRect","addElement","add","isListenerAttached","requestAnimationFrame","eventHandler","size","removeScrollHandler","forEach","makeItVisible","removeElementFromList","cancelAnimationFrame","toRemove","delete","setLink","visible","setVisible","thisInstance","useMemo","getRef","useCallback"],"version":3,"file":"index.js.map"}
+{"mappings":"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","sources":["<anon>","src/index.tsx","src/lazyLoadBackgroundImage.tsx","src/lazyLoadImage.tsx","src/lazyLoadFrame.tsx","src/lazyLoadComponent.tsx","src/useIsInViewport.tsx"],"sourcesContent":["var $9w1Q4$reactjsxruntime = require(\"react/jsx-runtime\");\nvar $9w1Q4$react = require(\"react\");\n\n\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true, configurable: true});\n}\n\nfunction $parcel$export(e, n, v, s) {\n  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});\n}\n\n$parcel$defineInteropFlag(module.exports);\n\n$parcel$export(module.exports, \"default\", () => $03b515f3f8c77d8f$export$2e2bcd8739ae039);\n$parcel$export(module.exports, \"LazyBackgroundImage\", () => $6e38eea936045ca0$export$2e2bcd8739ae039);\n$parcel$export(module.exports, \"LazyImage\", () => $f6f596272f209e0c$export$2e2bcd8739ae039);\n$parcel$export(module.exports, \"LazyFrame\", () => $8e3d626f2d1eebd8$export$2e2bcd8739ae039);\n$parcel$export(module.exports, \"LazyComponent\", () => $c17687259f8b5ddf$export$2e2bcd8739ae039);\n\n\n\nfunction $6e38eea936045ca0$export$2e2bcd8739ae039(props) {\n    const [setRef, link, isViewable] = (0, $03b515f3f8c77d8f$export$2e2bcd8739ae039)(props);\n    const [style, setStyle] = (0, $9w1Q4$react.useState)({\n        backgroundImage: `url(${link})`,\n        ...props.style\n    });\n    (0, $9w1Q4$react.useEffect)(()=>{\n        isViewable && setStyle({\n            backgroundImage: `url(${link})`,\n            ...props.style\n        });\n    }, [\n        link,\n        isViewable,\n        props.style\n    ]);\n    return /*#__PURE__*/ (0, $9w1Q4$reactjsxruntime.jsx)(\"div\", {\n        className: props.className,\n        style: style,\n        ref: (node)=>{\n            setRef(node);\n        },\n        children: props.children\n    });\n}\n\n\n\n\nfunction $f6f596272f209e0c$export$2e2bcd8739ae039(props) {\n    const [setRef, link] = (0, $03b515f3f8c77d8f$export$2e2bcd8739ae039)(props);\n    return /*#__PURE__*/ (0, $9w1Q4$reactjsxruntime.jsx)(\"div\", {\n        ref: (node)=>{\n            setRef(node);\n        },\n        children: /*#__PURE__*/ (0, $9w1Q4$reactjsxruntime.jsx)(\"img\", {\n            src: link,\n            alt: props.alt,\n            style: props.style,\n            className: props.className,\n            title: props.title\n        })\n    });\n}\n\n\n\n\nfunction $8e3d626f2d1eebd8$export$2e2bcd8739ae039(props) {\n    const [setRef, link] = (0, $03b515f3f8c77d8f$export$2e2bcd8739ae039)(props);\n    return /*#__PURE__*/ (0, $9w1Q4$reactjsxruntime.jsx)(\"iframe\", {\n        // scrolling={props.scrolling || 'no'}\n        src: link,\n        // frameBorder={props.frameBorder || 'no'}\n        // style={props.style || {border: props.frameBorder}}\n        ref: (node)=>{\n            setRef(node);\n        },\n        ...props,\n        height: props.height || '500',\n        allowFullScreen: props.allowFullScreen || true\n    });\n}\n\n\n\n\nfunction $c17687259f8b5ddf$export$2e2bcd8739ae039(props) {\n    const [setRef, _, isVisible] = (0, $03b515f3f8c77d8f$export$2e2bcd8739ae039)(props);\n    if (!isVisible) return /*#__PURE__*/ (0, $9w1Q4$reactjsxruntime.jsx)(\"div\", {\n        ref: (node)=>{\n            setRef(node);\n        },\n        style: {\n            height: '300px',\n            width: '300px',\n            ...props.style\n        }\n    });\n    return /*#__PURE__*/ (0, $9w1Q4$reactjsxruntime.jsx)(\"div\", {\n        children: props.children\n    });\n}\n\n\n\n// array with all the elements that are waiting to be shown in the viewport\nconst $03b515f3f8c77d8f$var$elements = new Set();\nconst $03b515f3f8c77d8f$var$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: ({ offset: offset, top: top, left: left })=>top < window.innerHeight + offset && left < window.innerWidth + offset,\n    calculateNewPosition: (elem)=>{\n        const { top: top, left: left } = elem.element?.getBoundingClientRect() || {\n            top: 0,\n            left: 0\n        };\n        return {\n            ...elem,\n            top: top,\n            left: left\n        };\n    },\n    addElement: (element)=>{\n        //the distance from the pixel 0,0 and the top of the element\n        $03b515f3f8c77d8f$var$elements.add(element);\n        //check if has already been started the rAF cycle\n        if ($03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached === 0) $03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached = window.requestAnimationFrame($03b515f3f8c77d8f$var$CheckIfRender.eventHandler);\n    },\n    eventHandler: ()=>{\n        //if there is no more element to lazy load remove the listener/rAF\n        if ($03b515f3f8c77d8f$var$elements.size === 0) $03b515f3f8c77d8f$var$CheckIfRender.removeScrollHandler();\n        else {\n            $03b515f3f8c77d8f$var$elements.forEach((elem)=>{\n                const haveToShow = $03b515f3f8c77d8f$var$CheckIfRender.isInViewPort($03b515f3f8c77d8f$var$CheckIfRender.calculateNewPosition(elem));\n                if (haveToShow) {\n                    elem.makeItVisible();\n                    // remove element from the list of elements to lazy load\n                    $03b515f3f8c77d8f$var$CheckIfRender.removeElementFromList(elem);\n                }\n            });\n            $03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached = window.requestAnimationFrame($03b515f3f8c77d8f$var$CheckIfRender.eventHandler);\n        }\n    },\n    removeScrollHandler: ()=>{\n        window.cancelAnimationFrame($03b515f3f8c77d8f$var$CheckIfRender.isListenerAttached);\n        $03b515f3f8c77d8f$var$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: (toRemove)=>{\n        $03b515f3f8c77d8f$var$elements.delete(toRemove);\n    },\n    isListenerAttached: 0\n};\nfunction $03b515f3f8c77d8f$export$2e2bcd8739ae039(props) {\n    const [link, setLink] = (0, $9w1Q4$react.useState)('');\n    const [visible, setVisible] = (0, $9w1Q4$react.useState)(false);\n    const [ref, setRef] = (0, $9w1Q4$react.useState)(null);\n    const makeItVisible = (0, $9w1Q4$react.useCallback)(()=>{\n        if (props.link) setLink(()=>props.link);\n        setVisible(()=>true);\n    }, [\n        props.link\n    ]);\n    const thisInstance = (0, $9w1Q4$react.useMemo)(()=>{\n        return {\n            element: ref,\n            makeItVisible: makeItVisible,\n            offset: props.offset || 100\n        };\n    }, [\n        ref,\n        props.offset,\n        makeItVisible\n    ]);\n    const getRef = (0, $9w1Q4$react.useCallback)((node)=>{\n        if (node !== null) setRef(node);\n    }, []);\n    (0, $9w1Q4$react.useEffect)(()=>{\n        if (ref !== null) // add the element to the array of elements that are waiting to be lazy loaded\n        $03b515f3f8c77d8f$var$CheckIfRender.addElement(thisInstance);\n        return ()=>// if the element is unloaded remove the element from the list of elements that needs to be lazy loader\n            $03b515f3f8c77d8f$var$CheckIfRender.removeElementFromList(thisInstance);\n    }, [\n        ref,\n        thisInstance\n    ]);\n    return [\n        getRef,\n        link,\n        visible\n    ];\n}\n\n\n\n\n//# sourceMappingURL=index.js.map\n","import LazyBackgroundImage from './lazyLoadBackgroundImage'\nimport LazyImage from './lazyLoadImage'\nimport LazyFrame from './lazyLoadFrame'\nimport LazyComponent from './lazyLoadComponent'\n\nexport { default } from './useIsInViewport'\nexport { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent }\n","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\ttitle: 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\ttitle={props.title}\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":["$9w1Q4$reactjsxruntime","require","$9w1Q4$react","$parcel$defineInteropFlag","a","Object","defineProperty","value","configurable","$parcel$export","e","n","v","s","get","set","enumerable","$6e38eea936045ca0$export$2e2bcd8739ae039","props","setRef","link","isViewable","$03b515f3f8c77d8f$export$2e2bcd8739ae039","style","setStyle","useState","backgroundImage","useEffect","jsx","className","ref","node","children","$f6f596272f209e0c$export$2e2bcd8739ae039","src","alt","title","$8e3d626f2d1eebd8$export$2e2bcd8739ae039","height","allowFullScreen","$c17687259f8b5ddf$export$2e2bcd8739ae039","_","isVisible","width","module","exports","$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/dist/module.js

@@ -0,0 +1,186 @@
+import {jsx as $4MPRY$jsx} from "react/jsx-runtime";
+import {useState as $4MPRY$useState, useEffect as $4MPRY$useEffect, useCallback as $4MPRY$useCallback, useMemo as $4MPRY$useMemo} from "react";
+
+
+
+
+function $d53282a0f683afba$export$2e2bcd8739ae039(props) {
+    const [setRef, link, isViewable] = (0, $cf52ec504e3068a6$export$2e2bcd8739ae039)(props);
+    const [style, setStyle] = (0, $4MPRY$useState)({
+        backgroundImage: `url(${link})`,
+        ...props.style
+    });
+    (0, $4MPRY$useEffect)(()=>{
+        isViewable && setStyle({
+            backgroundImage: `url(${link})`,
+            ...props.style
+        });
+    }, [
+        link,
+        isViewable,
+        props.style
+    ]);
+    return /*#__PURE__*/ (0, $4MPRY$jsx)("div", {
+        className: props.className,
+        style: style,
+        ref: (node)=>{
+            setRef(node);
+        },
+        children: props.children
+    });
+}
+
+
+
+
+function $c76f9bf8c035eea9$export$2e2bcd8739ae039(props) {
+    const [setRef, link] = (0, $cf52ec504e3068a6$export$2e2bcd8739ae039)(props);
+    return /*#__PURE__*/ (0, $4MPRY$jsx)("div", {
+        ref: (node)=>{
+            setRef(node);
+        },
+        children: /*#__PURE__*/ (0, $4MPRY$jsx)("img", {
+            src: link,
+            alt: props.alt,
+            style: props.style,
+            className: props.className,
+            title: props.title
+        })
+    });
+}
+
+
+
+
+function $6154e4cf378cce38$export$2e2bcd8739ae039(props) {
+    const [setRef, link] = (0, $cf52ec504e3068a6$export$2e2bcd8739ae039)(props);
+    return /*#__PURE__*/ (0, $4MPRY$jsx)("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
+    });
+}
+
+
+
+
+function $bff95282d9e2e246$export$2e2bcd8739ae039(props) {
+    const [setRef, _, isVisible] = (0, $cf52ec504e3068a6$export$2e2bcd8739ae039)(props);
+    if (!isVisible) return /*#__PURE__*/ (0, $4MPRY$jsx)("div", {
+        ref: (node)=>{
+            setRef(node);
+        },
+        style: {
+            height: '300px',
+            width: '300px',
+            ...props.style
+        }
+    });
+    return /*#__PURE__*/ (0, $4MPRY$jsx)("div", {
+        children: props.children
+    });
+}
+
+
+
+// array with all the elements that are waiting to be shown in the viewport
+const $cf52ec504e3068a6$var$elements = new Set();
+const $cf52ec504e3068a6$var$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: offset, top: top, left: left })=>top < window.innerHeight + offset && left < window.innerWidth + offset,
+    calculateNewPosition: (elem)=>{
+        const { top: top, left: left } = elem.element?.getBoundingClientRect() || {
+            top: 0,
+            left: 0
+        };
+        return {
+            ...elem,
+            top: top,
+            left: left
+        };
+    },
+    addElement: (element)=>{
+        //the distance from the pixel 0,0 and the top of the element
+        $cf52ec504e3068a6$var$elements.add(element);
+        //check if has already been started the rAF cycle
+        if ($cf52ec504e3068a6$var$CheckIfRender.isListenerAttached === 0) $cf52ec504e3068a6$var$CheckIfRender.isListenerAttached = window.requestAnimationFrame($cf52ec504e3068a6$var$CheckIfRender.eventHandler);
+    },
+    eventHandler: ()=>{
+        //if there is no more element to lazy load remove the listener/rAF
+        if ($cf52ec504e3068a6$var$elements.size === 0) $cf52ec504e3068a6$var$CheckIfRender.removeScrollHandler();
+        else {
+            $cf52ec504e3068a6$var$elements.forEach((elem)=>{
+                const haveToShow = $cf52ec504e3068a6$var$CheckIfRender.isInViewPort($cf52ec504e3068a6$var$CheckIfRender.calculateNewPosition(elem));
+                if (haveToShow) {
+                    elem.makeItVisible();
+                    // remove element from the list of elements to lazy load
+                    $cf52ec504e3068a6$var$CheckIfRender.removeElementFromList(elem);
+                }
+            });
+            $cf52ec504e3068a6$var$CheckIfRender.isListenerAttached = window.requestAnimationFrame($cf52ec504e3068a6$var$CheckIfRender.eventHandler);
+        }
+    },
+    removeScrollHandler: ()=>{
+        window.cancelAnimationFrame($cf52ec504e3068a6$var$CheckIfRender.isListenerAttached);
+        $cf52ec504e3068a6$var$CheckIfRender.isListenerAttached = 0;
+    },
+    //When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded
+    removeElementFromList: (toRemove)=>{
+        $cf52ec504e3068a6$var$elements.delete(toRemove);
+    },
+    isListenerAttached: 0
+};
+function $cf52ec504e3068a6$export$2e2bcd8739ae039(props) {
+    const [link, setLink] = (0, $4MPRY$useState)('');
+    const [visible, setVisible] = (0, $4MPRY$useState)(false);
+    const [ref, setRef] = (0, $4MPRY$useState)(null);
+    const makeItVisible = (0, $4MPRY$useCallback)(()=>{
+        if (props.link) setLink(()=>props.link);
+        setVisible(()=>true);
+    }, [
+        props.link
+    ]);
+    const thisInstance = (0, $4MPRY$useMemo)(()=>{
+        return {
+            element: ref,
+            makeItVisible: makeItVisible,
+            offset: props.offset || 100
+        };
+    }, [
+        ref,
+        props.offset,
+        makeItVisible
+    ]);
+    const getRef = (0, $4MPRY$useCallback)((node)=>{
+        if (node !== null) setRef(node);
+    }, []);
+    (0, $4MPRY$useEffect)(()=>{
+        if (ref !== null) // add the element to the array of elements that are waiting to be lazy loaded
+        $cf52ec504e3068a6$var$CheckIfRender.addElement(thisInstance);
+        return ()=>// if the element is unloaded remove the element from the list of elements that needs to be lazy loader
+            $cf52ec504e3068a6$var$CheckIfRender.removeElementFromList(thisInstance);
+    }, [
+        ref,
+        thisInstance
+    ]);
+    return [
+        getRef,
+        link,
+        visible
+    ];
+}
+
+
+
+
+export {$cf52ec504e3068a6$export$2e2bcd8739ae039 as default, $d53282a0f683afba$export$2e2bcd8739ae039 as LazyBackgroundImage, $c76f9bf8c035eea9$export$2e2bcd8739ae039 as LazyImage, $6154e4cf378cce38$export$2e2bcd8739ae039 as LazyFrame, $bff95282d9e2e246$export$2e2bcd8739ae039 as LazyComponent};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["src/index.tsx","src/lazyLoadBackgroundImage.tsx","src/lazyLoadImage.tsx","src/lazyLoadFrame.tsx","src/lazyLoadComponent.tsx","src/useIsInViewport.tsx"],"sourcesContent":["import LazyBackgroundImage from './lazyLoadBackgroundImage'\nimport LazyImage from './lazyLoadImage'\nimport LazyFrame from './lazyLoadFrame'\nimport LazyComponent from './lazyLoadComponent'\n\nexport { default } from './useIsInViewport'\nexport { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent }\n","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\ttitle: 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\ttitle={props.title}\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":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, JSX } from "react";
+interface LazyBackgroundImageProps {
+    link: string;
+    offset: number;
+    style: object;
+    className: string;
+    children: ReactNode;
+}
+export function LazyBackgroundImage(props: LazyBackgroundImageProps): JSX.Element;
+interface LazyImageProps {
+    link: string;
+    offset: number;
+    alt: string;
+    style: object;
+    className: string;
+    title: string;
+}
+export function LazyImage(props: LazyImageProps): JSX.Element;
+interface LazyFrameProps {
+    height: number;
+    link: string;
+    offset: number;
+    allowFullScreen: boolean;
+}
+export function LazyFrame(props: LazyFrameProps): JSX.Element;
+interface LazyComponentProps {
+    link: string;
+    offset: number;
+    style: object;
+    children: ReactNode;
+}
+export function LazyComponent(props: LazyComponentProps): JSX.Element;
+export default function useRenderIfInViewPort(props: {
+    link: string;
+    offset: number;
+}): [(node: HTMLDivElement | null) => void, string, boolean];
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";AAGA;IACC,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,oCAA4C,KAAK,EAAE,wBAAwB,eA4B1E;ACrCD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAA;CACb;AAED,0BAAkC,KAAK,EAAE,cAAc,eAkBtD;AC3BD;IACC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,OAAO,CAAC;CACzB;AAED,0BAAkC,KAAK,EAAE,cAAc,eAiBtD;ACvBD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,8BAAsC,KAAK,EAAE,kBAAkB,eAkB9D;ACmDD,8CAA8C,KAAK,EAAE;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;CACd,GAAG,CAAC,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,CAiC3D","sources":["src/src/lazyLoadBackgroundImage.tsx","src/src/lazyLoadImage.tsx","src/src/lazyLoadFrame.tsx","src/src/lazyLoadComponent.tsx","src/src/useIsInViewport.tsx","src/src/index.tsx","src/index.tsx"],"sourcesContent":[null,null,null,null,null,null,"import LazyBackgroundImage from './lazyLoadBackgroundImage'\nimport LazyImage from './lazyLoadImage'\nimport LazyFrame from './lazyLoadFrame'\nimport LazyComponent from './lazyLoadComponent'\n\nexport { default } from './useIsInViewport'\nexport { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent }\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,15 +1,33 @@
 {
   "name": "lazy-react",
-  "version": "3.6.1",
-  "description": "components to lazy load iframes, images and images as backgrounds",
+  "version": "3.6.3",
+  "description": "React utility for lazy resource loading and lazy component execution. Engineered with requestAnimationFrame to ensure 60fps scrolling, it minimizes both network payload and CPU overhead by deferring resource fetching and component mounting until the viewport entry.",
+  "author": "Jonathan Obino",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jonathanobino/react-lazy"
+  },
+  "keywords": [
+    "react",
+    "lazy-loading",
+    "typescript",
+    "javascript",
+    "performance",
+    "react-component",
+    "web-performance",
+    "frontend",
+    "library"
+  ],
   "source": "./src/index.tsx",
   "main": "./dist/index.js",
+  "module": "dist/module.js",
+  "types": "./dist/types.d.ts",
   "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,37 +37,24 @@
     }
   },
   "lint-staged": {
-    "src/*.js": [
-      "prettier --write --single-quote --no-semi",
+    "src/*.jsx": [
+      "biome format",
       "git add"
     ]
   },
-  "keywords": [
-    "react",
-    "lazy-load"
-  ],
-  "author": "Jonathan Obino",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jonathanobino/react-lazy"
-  },
   "devDependencies": {
-    "@types/jest": "^27.4.1",
-    "@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",
+    "@biomejs/biome": "2.3.11",
+    "@parcel/packager-ts": "^2.16.3",
+    "@parcel/transformer-typescript-types": "^2.9.0",
+    "@types/node": "^25.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "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"
+    "parcel": "^2.9.0",
+    "process": "^0.11.10",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "^18.3.0",

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,30 @@
-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,
+	title: 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}
+				title={props.title}
+			/>
+		</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"
-    }
-  }
-}