summaryrefslogtreecommitdiff
path: root/apps/web/src/hooks/use-disable-browser-zoom.ts
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/hooks/use-disable-browser-zoom.ts')
-rw-r--r--apps/web/src/hooks/use-disable-browser-zoom.ts63
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);
- };
- }, []);
-};