useWindowZoomLevel

Useful for when you need to dynamically set elements based on the window zoom/magnification level set by the user.

TypeScript

import { useState, useEffect } from "react";

export default function useWindowZoomLevel() {
  const [zoomLevel, setZoomLevel] = useState<number>(100);
  useEffect(() => {
    function getZoomLevel() {
      const { outerWidth, visualViewport } = window;
      const level = Math.round(
        (outerWidth / (visualViewport?.width ?? 1)) * 100
      );
      return level;
    }
    setZoomLevel(getZoomLevel());
    function handleResize() {
      setZoomLevel(getZoomLevel());
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return { zoomLevel };
}

JavaScript

import { useState, useEffect } from "react";

export default function useWindowZoomLevel() {
  const [zoomLevel, setZoomLevel] = useState(100);
  useEffect(() => {
    function getZoomLevel() {
      const { outerWidth, visualViewport } = window;
      const level = Math.round(
        (outerWidth / (visualViewport?.width ?? 1)) * 100
      );
      return level;
    }
    setZoomLevel(getZoomLevel());
    function handleResize() {
      setZoomLevel(getZoomLevel());
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return { zoomLevel };
}