diff options
Diffstat (limited to 'apps/web/src/hooks/use-disable-browser-zoom.ts')
| -rw-r--r-- | apps/web/src/hooks/use-disable-browser-zoom.ts | 63 |
1 files changed, 0 insertions, 63 deletions
diff --git a/apps/web/src/hooks/use-disable-browser-zoom.ts b/apps/web/src/hooks/use-disable-browser-zoom.ts deleted file mode 100644 index 9467cb71..00000000 --- a/apps/web/src/hooks/use-disable-browser-zoom.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { useEffect } from "react"; - -/** - * useDisableBrowserZoom - * - * This React hook prevents users from zooming in/out the browser window using keyboard shortcuts, - * mouse wheel, or gesture events (such as pinch-to-zoom on trackpads or touch devices). - * - * Typical use case: apps with fixed-size UIs, custom editors, or when zooming would break layout. - * - * NOTE: Disabling browser zoom may negatively affect accessibility and user experience. - * Use with caution, especially for public-facing applications. - */ -export const useDisableBrowserZoom = () => { - useEffect(() => { - /** - * Prevents browser zoom when user holds Ctrl (or Cmd on Mac) and scrolls the mouse wheel. - */ - const handleWheel = (e: WheelEvent) => { - if (e.ctrlKey) { - e.preventDefault(); - } - }; - - /** - * Prevents browser zoom via keyboard shortcuts: - * Ctrl/Cmd + '+', '-', '=', or '0' (reset zoom) - * Some keyboards emit '=' for '+' (without Shift). - */ - const handleKeyDown = (e: KeyboardEvent) => { - if (e.ctrlKey) { - const key = e.key; - if (key === "+" || key === "-" || key === "0" || key === "=") { - e.preventDefault(); - } - } - }; - - /** - * Prevents pinch-zoom gestures on supported browsers (mainly Safari/macOS/iOS). - * gesturestart, gesturechange, and gestureend are non-standard and not supported everywhere. - */ - const handleGesture = (e: Event) => { - e.preventDefault(); - }; - - // Attach event listeners (passive: false is required for preventDefault to work) - window.addEventListener("wheel", handleWheel, { passive: false }); - window.addEventListener("keydown", handleKeyDown, { passive: false }); - window.addEventListener("gesturestart", handleGesture, { passive: false }); - window.addEventListener("gesturechange", handleGesture, { passive: false }); - window.addEventListener("gestureend", handleGesture, { passive: false }); - - // Cleanup listeners on unmount to avoid memory leaks - return () => { - window.removeEventListener("wheel", handleWheel); - window.removeEventListener("keydown", handleKeyDown); - window.removeEventListener("gesturestart", handleGesture); - window.removeEventListener("gesturechange", handleGesture); - window.removeEventListener("gestureend", handleGesture); - }; - }, []); -}; |
