lazy-react 3.6.2 → 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/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,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]}
+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 { 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"}
+{"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,9 +1,28 @@
 {
   "name": "lazy-react",
-  "version": "3.6.2",
-  "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",
@@ -23,26 +42,19 @@
       "git add"
     ]
   },
-  "keywords": [
-    "react",
-    "lazy-load"
-  ],
-  "author": "Jonathan Obino",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jonathanobino/react-lazy"
-  },
   "devDependencies": {
     "@biomejs/biome": "2.3.11",
-    "@types/node": "^17.0.21",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@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",
-    "process": "^0.11.10"
+    "parcel": "^2.9.0",
+    "process": "^0.11.10",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "^18.3.0",

package/src/lazyLoadImage.tsx

@@ -5,7 +5,8 @@ interface LazyImageProps {
   offset: number,
   alt: string,
   style: object,
-  className: string
+  className: string,
+	title: string
 }
 
 export default function LazyImage(props: LazyImageProps) {
@@ -22,6 +23,7 @@ export default function LazyImage(props: LazyImageProps) {
 				alt={props.alt}
 				style={props.style}
 				className={props.className}
+				title={props.title}
 			/>
 		</div>
 	)