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,useRef,useState,useMemo}from"react";const ImageLazy=({src:e,alt:t,srcSet:o,sizes:r,width:n,height:a,className:s,id:i,extraData:c,title:l,useTitleFromAlt:u=!1,viewTransitionName:d,style:m,backgroundColor:f,animationDuration:g="0.9s",blurAmount:p="20px",fallbackSrc:y,threshold:b=.1,transitionType:h="blur",onLoadComplete:v,visibleByDefault:w=!1,loadingComponent:x})=>{const S=useRef(null),[L,z]=useState(w?e:null),[I,j]=useState(!1),[E,_]=useState(!1);useEffect((()=>{j(!1),_(!1),z(w?e:null)}),[e,w]),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]),useEffect((()=>{if("undefined"==typeof window||w)return;if("undefined"==typeof IntersectionObserver||!S.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(S.current),()=>t.disconnect()}),[e,b,w,L]);const k="custom"===h,$=useMemo((()=>k?{}:"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}`}),[h,I,g,p,k]),C=useMemo((()=>({backgroundColor:!I&&f?f:void 0,backgroundSize:"cover",backgroundPosition:"center",...d?{viewTransitionName:d}:{},...$,...m})),[I,f,d,$,m]);return _jsxs(_Fragment,{children:[!I&&x,(!E||null===L)&&_jsx("img",{ref:S,src:L??void 0,alt:t,title:l??(u?t:void 0),className:s,width:n,height:a,id:i?.toString(),onLoad:()=>{j(!0),v?.()},onError:()=>{y&&L!==y?z(y):_(!0)},srcSet:L?o:void 0,sizes:L?r:void 0,style:C,...c})]})};export default ImageLazy;export{ImageLazy};