mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-05-25 01:34:59 +01:00
* [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>
21 lines
521 B
TypeScript
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;
|