cosmos-explorer/src/hooks/useZoomLevel.ts
SATYA SB d657c4919e
[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel. (#2092)
* [accessibility-2278267]:[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel.

* feat: implement zoom level hook and update components for responsive design.

* Format fixed.

* feat: add conditionalClass utility and refactor className assignments for improved readability.

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
2025-05-14 10:16:19 +05:30

21 lines
521 B
TypeScript

import { useEffect, useState } from "react";
const useZoomLevel = (threshold: number = 2): boolean => {
const [isZoomed, setIsZoomed] = useState<boolean>(false);
useEffect(() => {
const checkZoom = () => {
const zoomLevel = window.devicePixelRatio;
setIsZoomed(zoomLevel >= threshold);
};
checkZoom();
window.addEventListener("resize", checkZoom);
return () => window.removeEventListener("resize", checkZoom);
}, [threshold]);
return isZoomed;
};
export default useZoomLevel;