react-lazy-img-observer/dist/esm/ImageLazy.min.js

A React component for lazy loading images with Intersection Observer

import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{useEffect,useLayoutEffect,useRef,useState}from"react";const ImageLazy=({src:e,alt:t,srcSet:o,sizes:a,width:r,height:n,className:s,id:i,extraData:c,title:l,useTitleFromAlt:u=!1,viewTransitionName:d,style:f,backgroundColor:m,animationDuration:g="0.9s",blurAmount:p="20px",fallbackSrc:y,threshold:b=.5,transitionType:h="blur",onLoadComplete:v,visibleByDefault:w=!1,loadingComponent:x})=>{const L=useRef(null),[S,z]=useState(w?e:null),[I,j]=useState(!1),[E,_]=useState(!1);useEffect((()=>{"undefined"!=typeof window&&window?.location?.hostname?.includes("localhost")&&(t||console.warn("[ImageLazy] ⚠️ Se recomienda definir el atributo 'alt' por accesibilidad."),e||console.warn("[ImageLazy] ⚠️ La prop 'src' está vacía o nula. La imagen no se cargará."))}),[t,e]),useLayoutEffect((()=>{if("undefined"==typeof window||w)return;if("undefined"==typeof IntersectionObserver||!L.current)return;const t=new IntersectionObserver((o=>{o.forEach((o=>{o.isIntersecting&&(z(e),t.unobserve(o.target))}))}),{root:null,rootMargin:"0px",threshold:b});return t.observe(L.current),()=>t.disconnect()}),[e,b,w]);const k="custom"===h?{}:"fade"===h?{opacity:I?1:0,transition:`opacity ${g}`}:"scale"===h?{transform:I?"scale(1)":"scale(1.05)",opacity:I?1:0,transition:`transform ${g}, opacity ${g}`}:{filter:I?"none":`blur(${p})`,transition:`filter ${g}`};return _jsxs(_Fragment,{children:[!I&&x,!E&&_jsx("img",{ref:L,src:S??void 0,alt:t,title:l??(u?t:void 0),className:s,width:r,height:n,loading:"lazy",id:i?.toString(),onLoad:()=>{j(!0),v?.()},onError:()=>{y&&S!==y?z(y):_(!0)},srcSet:S?o:void 0,sizes:S?a:void 0,style:{backgroundColor:!I&&m?m:void 0,backgroundSize:"cover",backgroundPosition:"center",...d?{viewTransitionName:d}:{},...k,...f},...c})]})};export default ImageLazy;export{ImageLazy};