simple-image-magnifier/dist/react-image-magnifier.cjs

Image Magnifier JavaScript (Typescript) | Image Zoom on Hover using | Image Hover Effect

"use strict";const l=require("react"),re=require("./simple-image-magnifier.cjs");var j={exports:{}},y={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var M;function te(){if(M)return y;M=1;var u=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function i(f,o,s){var d=null;if(s!==void 0&&(d=""+s),o.key!==void 0&&(d=""+o.key),"key"in o){s={};for(var m in o)m!=="key"&&(s[m]=o[m])}else s=o;return o=s.ref,{$$typeof:u,type:f,key:d,ref:o!==void 0?o:null,props:s}}return y.Fragment=c,y.jsx=i,y.jsxs=i,y}var O={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var W;function ne(){return W||(W=1,process.env.NODE_ENV!=="production"&&function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case z:return"Profiler";case U:return"StrictMode";case X:return"Suspense";case B:return"SuspenseList";case Z:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case v:return"Portal";case V:return e.displayName||"Context";case J:return(e._context.displayName||"Context")+".Consumer";case G:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case H:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function c(e){return""+e}function i(e){try{c(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),c(e)}}function f(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=h.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function d(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function m(e,r){function t(){Y||(Y=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function R(){var e=u(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function T(e,r,t,n,x,N){var a=t.ref;return e={$$typeof:k,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function _(e,r,t,n,x,N){var a=r.children;if(a!==void 0)if(n)if(K(a)){for(n=0;n<a.length;n++)g(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(a);if(I.call(r,"key")){a=u(e);var p=Object.keys(r).filter(function(ee){return ee!=="key"});n=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",D[a+n]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,n,a,p,a),D[a+n]=!0)}if(a=null,t!==void 0&&(i(t),a=""+t),d(r)&&(i(r.key),a=""+r.key),"key"in r){t={};for(var C in r)C!=="key"&&(t[C]=r[C])}else t=r;return a&&m(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,a,t,o(),x,N)}function g(e){b(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?b(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function b(e){return typeof e=="object"&&e!==null&&e.$$typeof===k}var E=l,k=Symbol.for("react.transitional.element"),v=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),J=Symbol.for("react.consumer"),V=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),H=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),h=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,K=Array.isArray,w=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var Y,L={},F=E.react_stack_bottom_frame.bind(E,s)(),$=w(f(s)),D={};O.Fragment=P,O.jsx=function(e,r,t){var n=1e4>h.recentlyCreatedOwnerStacks++;return _(e,r,t,!1,n?Error("react-stack-top-frame"):F,n?w(f(e)):$)},O.jsxs=function(e,r,t){var n=1e4>h.recentlyCreatedOwnerStacks++;return _(e,r,t,!0,n?Error("react-stack-top-frame"):F,n?w(f(e)):$)}}()),O}var q;function ae(){return q||(q=1,process.env.NODE_ENV==="production"?j.exports=te():j.exports=ne()),j.exports}var A=ae();const oe=({srcPreview:u,srcOriginal:c,width:i=400,height:f=600,className:o="",objectFit:s="cover"})=>{const[d,m]=l.useState(!1),R=l.useRef(null),T=l.useRef(null),_=l.useRef(null),g=l.useRef(()=>{}),b=l.useCallback(()=>{m(!0)},[]),E=l.useCallback(()=>{m(!1),console.error("Failed to load original image:",c)},[c]),k=l.useCallback(()=>{R.current&&T.current&&_.current&&d&&(g.current=re(R.current,T.current,_.current))},[d]);return l.useEffect(()=>{k()},[k]),l.useEffect(()=>{const v=_.current;return v&&(v.addEventListener("load",b),v.addEventListener("error",E)),()=>{v&&(v.removeEventListener("load",b),v.removeEventListener("error",E))}},[b,E]),l.useEffect(()=>{g.current()},[c,u,i,f]),A.jsxs("div",{ref:R,className:o,style:{position:"relative",overflow:"hidden",width:typeof i=="number"?i+"px":i??"100%",height:typeof f=="number"?f+"px":i??"100%"},children:[A.jsx("img",{ref:T,src:u,alt:"Preview",style:{position:"relative",zIndex:"1",objectFit:s??"cover",width:"100%",height:"100%",transitionProperty:"opacity",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms"}}),A.jsx("img",{ref:_,src:c,alt:"Original",style:{position:"absolute",maxWidth:"none",opacity:0}}),!d&&A.jsx("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:"#fff",backgroundColor:"rgba(107 114 128 / 0.5)"},children:"⏱"})]})};module.exports=oe;