react-image-map-resizer/dist/index.mjs

This is a simple library that makes HTML Image Maps responsive, so that they automatically stay scaled to the size of the image they are attached to using a React hook and native html img and map elements.

import{useRef as e,useEffect as t}from"react";var n=function(n){var r=e(null),i=e([]),o=e(100);return t((function(){var e=function(){if(r.current){var t=r.current.getElementsByTagName("area"),o=document.querySelector('img[usemap="#'.concat(n,'"]'));if(o&&o.complete){0===i.current.length&&t.length>0&&(i.current=Array.from(t).map((function(e){return e.getAttribute("coords")||""})));var a={width:o.width/o.naturalWidth,height:o.height/o.naturalHeight},u=window.getComputedStyle(o),c={width:parseInt(u.getPropertyValue("padding-left"),10)||0,height:parseInt(u.getPropertyValue("padding-top"),10)||0};Array.from(t).forEach((function(e,t){var n,r=(null===(n=i.current[t])||void 0===n?void 0:n.split(","))||[];if(0!==r.length){var o=r.map((function(e,t){var n=t%2==0?"width":"height";return c[n]+Math.floor(Number(e)*a[n])})).join(",");e.setAttribute("coords",o)}}))}else null==o||o.addEventListener("load",e,{once:!0})}},t=function(){clearTimeout(o.current),o.current=window.setTimeout(e,100)};if("undefined"!=typeof ResizeObserver){var a=document.querySelector('img[usemap="#'.concat(n,'"]'));if(a){var u=new ResizeObserver(t);return u.observe(a),function(){u.disconnect(),window.removeEventListener("resize",t),window.removeEventListener("focus",e),window.removeEventListener("readystatechange",e),document.removeEventListener("fullscreenchange",e)}}}return e(),window.addEventListener("resize",t),window.addEventListener("focus",e),window.addEventListener("readystatechange",e),document.addEventListener("fullscreenchange",e),setTimeout(e,100),function(){clearTimeout(o.current),window.removeEventListener("resize",t),window.removeEventListener("focus",e),window.removeEventListener("readystatechange",e),document.removeEventListener("fullscreenchange",e)}}),[n]),r};export{n as default};
//# sourceMappingURL=index.mjs.map