react-blurish-image/dist/index.esm.js

A lightweight, optimized React image component with blur placeholders and lazy loading

import{jsx as e}from"react/jsx-runtime";import{useCallback as r,forwardRef as t,useRef as o,useEffect as n,useState as i,useMemo as a}from"react";var c=function(){return c=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e},c.apply(this,arguments)};function l(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)r.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(t[o[n]]=e[o[n]])}return t}"function"==typeof SuppressedError&&SuppressedError;var d=function(e){var r=e.src,t=e.width,o=e.quality,n=void 0===o?75:o,i=new URLSearchParams;t&&i.set("w",t.toString()),n&&i.set("q",n.toString());var a=i.toString();return a?"".concat(r,"?").concat(a):r},s=function(e,r){if(void 0===e&&(e=8),void 0===r&&(r=8),"undefined"==typeof window||"undefined"==typeof document)return"";try{var t=document.createElement("canvas");t.width=e,t.height=r;var o=t.getContext("2d");if(!o)return"";var n=o.createLinearGradient(0,0,e,r);return n.addColorStop(0,"#f0f0f0"),n.addColorStop(.5,"#e0e0e0"),n.addColorStop(1,"#d0d0d0"),o.fillStyle=n,o.fillRect(0,0,e,r),t.toDataURL("image/jpeg",.1)}catch(e){return console.warn("Failed to generate blur data URL:",e),""}};var u={enableWarnings:!1},f=function(e){u=c(c({},u),e)},p=function(){return u};function g(e,r,t,o,n,i){var a=null==e?void 0:e.src;e&&e["data-loaded-src"]!==a&&(e["data-loaded-src"]=a,("decode"in e?e.decode():Promise.resolve()).catch((function(){})).then((function(){if(e.parentElement&&e.isConnected){if("empty"!==r&&n(!0),null==t?void 0:t.current){var i=new Event("load");Object.defineProperty(i,"target",{writable:!1,value:e});var a=!1,l=!1;t.current(c(c({},i),{nativeEvent:i,currentTarget:e,target:e,isDefaultPrevented:function(){return a},isPropagationStopped:function(){return l},persist:function(){},preventDefault:function(){a=!0,i.preventDefault()},stopPropagation:function(){l=!0,i.stopPropagation()}}))}(null==o?void 0:o.current)&&o.current(e)}})))}var h=t((function(t,o){var n=t.src,i=t.srcSet,a=t.sizes,d=t.height,s=t.width,u=t.decoding,f=t.className,h=t.style,v=t.fetchPriority,y=t.placeholder,m=t.loading,b=t.unoptimized,w=t.fill,P=t.onLoadRef,S=t.onLoadingCompleteRef,L=t.setBlurComplete,O=t.setShowAltText;t.onLoad;var E=t.onError,j=t.alt,z=t.crossOrigin,C=t.referrerPolicy,R=l(t,["src","srcSet","sizes","height","width","decoding","className","style","fetchPriority","placeholder","loading","unoptimized","fill","onLoadRef","onLoadingCompleteRef","setBlurComplete","setShowAltText","onLoad","onError","alt","crossOrigin","referrerPolicy"]),x=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return r((function(r){e.forEach((function(e){"function"==typeof e?e(r):e&&"object"==typeof e&&(e.current=r)}))}),e)}(o,r((function(e){e&&(E&&(e.src=e.src),function(e,r){p().enableWarnings&&(r||console.error('Image is missing required "src" property:',e),null===e.getAttribute("alt")&&console.error('Image is missing required "alt" property. Please add Alternative Text to describe the image for screen readers and search engines.'))}(e,n),e.complete&&g(e,y,P,S,L))}),[n,y,P,S,L,E,b]));return e("img",c({},R,{fetchPriority:v},{loading:m,width:s,height:d,decoding:u,"data-nimg":w?"fill":"1",className:f,style:h,sizes:a,srcSet:i,src:n,alt:j,crossOrigin:z,referrerPolicy:C,ref:x,onLoad:function(e){g(e.currentTarget,y,P,S,L)},onError:function(e){O(!0),"empty"!==y&&L(!0),E&&E(e)}}))}));h.displayName="ImageElement";var v=t((function(r,t){var u=r.src,f=r.alt,p=r.width,g=r.height,v=r.fill,y=void 0!==v&&v,m=r.loader,b=void 0===m?d:m,w=r.quality,P=void 0===w?75:w,S=r.priority,L=void 0!==S&&S,O=r.loading,E=void 0===O?"lazy":O,j=r.placeholder,z=void 0===j?"empty":j,C=r.blurDataURL,R=r.unoptimized,x=void 0!==R&&R,q=r.onLoad,N=r.onError,D=r.onLoadingComplete,I=r.className,T=r.style,A=r.sizes,U=r.crossOrigin,k=r.referrerPolicy,B=r.decoding,F=void 0===B?"async":B,W=r.fetchPriority,G=l(r,["src","alt","width","height","fill","loader","quality","priority","loading","placeholder","blurDataURL","unoptimized","onLoad","onError","onLoadingComplete","className","style","sizes","crossOrigin","referrerPolicy","decoding","fetchPriority"]),H=o(q),J=o(D);n((function(){H.current=q}),[q]),n((function(){J.current=D}),[D]);var K=i(!1),M=K[0],Q=K[1],V=i(!1);V[0];var X=V[1],Y=a((function(){var e,r=u;if(!x&&b&&(r=b({src:u,width:p||640,quality:P}),p)){e=[640,750,828,1080,1200,1920,2048,3840].filter((function(e){return e<=2*p})).map((function(e){return"".concat(b({src:u,width:e,quality:P})," ").concat(e,"w")})).join(", ")}var t="blur"===z?C||s():void 0,o=c({},T);return y&&(o.position="absolute",o.height="100%",o.width="100%",o.left=0,o.top=0,o.right=0,o.bottom=0,o.objectFit=o.objectFit||"cover"),"blur"===z&&!M&&t&&(o.backgroundImage='url("'.concat(t,'")'),o.backgroundSize="cover",o.backgroundPosition="center",o.filter=M?"none":"blur(20px)",o.transition="filter 0.2s ease-in-out"),{src:r,srcSet:e,sizes:A,width:y?void 0:p,height:y?void 0:g,style:o,className:I,crossOrigin:U,referrerPolicy:k,decoding:F,loading:L?"eager":E,fetchPriority:W}}),[u,p,g,y,b,P,x,z,C,M,T,I,A,U,k,F,L,E,W]);return e(h,c({},Y,{alt:f,unoptimized:x,placeholder:z,fill:y,onLoadRef:H,onLoadingCompleteRef:J,setBlurComplete:Q,setShowAltText:X,onLoad:q,onError:N,ref:t},G))}));v.displayName="Image";export{v as Image,f as configureImage,v as default,d as defaultLoader,s as generateBlurDataURL,p as getImageConfig};
//# sourceMappingURL=index.esm.js.map