react-browser-zoom/dist/index.mjs.map

A React hook to monitor browser zoom level via devicePixelRatio.

{"version":3,"sources":["../src/useBrowserZoom.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\"\n\nconst getDpr = (): number => {\n\treturn typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1\n}\n\n/**\n * React hook to monitor browser zoom level changes by tracking `window.devicePixelRatio`.\n * Updates on every 'resize' event.\n *\n * @returns {number} The current devicePixelRatio value.\n */\nexport function useBrowserZoom(): number {\n\tconst [dpr, setDpr] = useState<number>(getDpr)\n\n\tconst handleResizeOrZoom = useCallback(() => {\n\t\tconst currentDpr = getDpr()\n\n\t\tsetDpr((prevDpr) => {\n\t\t\tif (prevDpr !== currentDpr) {\n\t\t\t\t// console.log(`DPR changed from ${prevDpr.toFixed(2)} to ${currentDpr.toFixed(2)}`)\n\t\t\t\treturn currentDpr\n\t\t\t}\n\n\t\t\treturn prevDpr\n\t\t})\n\t}, [])\n\n\tuseEffect(() => {\n\t\thandleResizeOrZoom()\n\n\t\twindow.addEventListener(\"resize\", handleResizeOrZoom)\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"resize\", handleResizeOrZoom)\n\t\t}\n\t}, [handleResizeOrZoom])\n\n\treturn dpr\n}\n"],"mappings":";AAAA,SAAS,UAAU,WAAW,mBAAmB;AAEjD,IAAM,SAAS,MAAc;AAC5B,SAAO,OAAO,WAAW,cAAc,OAAO,oBAAoB,IAAI;AACvE;AAQO,SAAS,iBAAyB;AACxC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB,MAAM;AAE7C,QAAM,qBAAqB,YAAY,MAAM;AAC5C,UAAM,aAAa,OAAO;AAE1B,WAAO,CAAC,YAAY;AACnB,UAAI,YAAY,YAAY;AAE3B,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,IACR,CAAC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACf,uBAAmB;AAEnB,WAAO,iBAAiB,UAAU,kBAAkB;AAEpD,WAAO,MAAM;AACZ,aAAO,oBAAoB,UAAU,kBAAkB;AAAA,IACxD;AAAA,EACD,GAAG,CAAC,kBAAkB,CAAC;AAEvB,SAAO;AACR;","names":[]}