react-blurish-image/dist/index.js

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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=function(){return t=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},t.apply(this,arguments)};function o(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 n=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},i=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 a={enableWarnings:!1},c=function(){return a};function l(e,r,o,n,i,a){var c=null==e?void 0:e.src;e&&e["data-loaded-src"]!==c&&(e["data-loaded-src"]=c,("decode"in e?e.decode():Promise.resolve()).catch((function(){})).then((function(){if(e.parentElement&&e.isConnected){if("empty"!==r&&i(!0),null==o?void 0:o.current){var a=new Event("load");Object.defineProperty(a,"target",{writable:!1,value:e});var c=!1,l=!1;o.current(t(t({},a),{nativeEvent:a,currentTarget:e,target:e,isDefaultPrevented:function(){return c},isPropagationStopped:function(){return l},persist:function(){},preventDefault:function(){c=!0,a.preventDefault()},stopPropagation:function(){l=!0,a.stopPropagation()}}))}(null==n?void 0:n.current)&&n.current(e)}})))}var s=r.forwardRef((function(n,i){var a=n.src,s=n.srcSet,d=n.sizes,u=n.height,f=n.width,p=n.decoding,g=n.className,v=n.style,h=n.fetchPriority,y=n.placeholder,m=n.loading,b=n.unoptimized,w=n.fill,P=n.onLoadRef,S=n.onLoadingCompleteRef,L=n.setBlurComplete,O=n.setShowAltText;n.onLoad;var x=n.onError,E=n.alt,R=n.crossOrigin,j=n.referrerPolicy,C=o(n,["src","srcSet","sizes","height","width","decoding","className","style","fetchPriority","placeholder","loading","unoptimized","fill","onLoadRef","onLoadingCompleteRef","setBlurComplete","setShowAltText","onLoad","onError","alt","crossOrigin","referrerPolicy"]),z=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return r.useCallback((function(r){e.forEach((function(e){"function"==typeof e?e(r):e&&"object"==typeof e&&(e.current=r)}))}),e)}(i,r.useCallback((function(e){e&&(x&&(e.src=e.src),function(e,r){c().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,a),e.complete&&l(e,y,P,S,L))}),[a,y,P,S,L,x,b]));return e.jsx("img",t({},C,{fetchPriority:h},{loading:m,width:f,height:u,decoding:p,"data-nimg":w?"fill":"1",className:g,style:v,sizes:d,srcSet:s,src:a,alt:E,crossOrigin:R,referrerPolicy:j,ref:z,onLoad:function(e){l(e.currentTarget,y,P,S,L)},onError:function(e){O(!0),"empty"!==y&&L(!0),x&&x(e)}}))}));s.displayName="ImageElement";var d=r.forwardRef((function(a,c){var l=a.src,d=a.alt,u=a.width,f=a.height,p=a.fill,g=void 0!==p&&p,v=a.loader,h=void 0===v?n:v,y=a.quality,m=void 0===y?75:y,b=a.priority,w=void 0!==b&&b,P=a.loading,S=void 0===P?"lazy":P,L=a.placeholder,O=void 0===L?"empty":L,x=a.blurDataURL,E=a.unoptimized,R=void 0!==E&&E,j=a.onLoad,C=a.onError,z=a.onLoadingComplete,q=a.className,I=a.style,N=a.sizes,D=a.crossOrigin,T=a.referrerPolicy,U=a.decoding,k=void 0===U?"async":U,A=a.fetchPriority,B=o(a,["src","alt","width","height","fill","loader","quality","priority","loading","placeholder","blurDataURL","unoptimized","onLoad","onError","onLoadingComplete","className","style","sizes","crossOrigin","referrerPolicy","decoding","fetchPriority"]),F=r.useRef(j),M=r.useRef(z);r.useEffect((function(){F.current=j}),[j]),r.useEffect((function(){M.current=z}),[z]);var W=r.useState(!1),_=W[0],G=W[1],H=r.useState(!1);H[0];var J=H[1],K=r.useMemo((function(){var e,r=l;if(!R&&h&&(r=h({src:l,width:u||640,quality:m}),u)){e=[640,750,828,1080,1200,1920,2048,3840].filter((function(e){return e<=2*u})).map((function(e){return"".concat(h({src:l,width:e,quality:m})," ").concat(e,"w")})).join(", ")}var o="blur"===O?x||i():void 0,n=t({},I);return g&&(n.position="absolute",n.height="100%",n.width="100%",n.left=0,n.top=0,n.right=0,n.bottom=0,n.objectFit=n.objectFit||"cover"),"blur"===O&&!_&&o&&(n.backgroundImage='url("'.concat(o,'")'),n.backgroundSize="cover",n.backgroundPosition="center",n.filter=_?"none":"blur(20px)",n.transition="filter 0.2s ease-in-out"),{src:r,srcSet:e,sizes:N,width:g?void 0:u,height:g?void 0:f,style:n,className:q,crossOrigin:D,referrerPolicy:T,decoding:k,loading:w?"eager":S,fetchPriority:A}}),[l,u,f,g,h,m,R,O,x,_,I,q,N,D,T,k,w,S,A]);return e.jsx(s,t({},K,{alt:d,unoptimized:R,placeholder:O,fill:g,onLoadRef:F,onLoadingCompleteRef:M,setBlurComplete:G,setShowAltText:J,onLoad:j,onError:C,ref:c},B))}));d.displayName="Image",exports.Image=d,exports.configureImage=function(e){a=t(t({},a),e)},exports.default=d,exports.defaultLoader=n,exports.generateBlurDataURL=i,exports.getImageConfig=c;
//# sourceMappingURL=index.js.map