Merge pull request #280 from rupeq/feat/use-device-pixel-ratio

[feat]: add useDevicePixelRatio hook

Author: debabin

Diff for: src/hooks/index.ts

@@ -16,6 +16,7 @@ export * from './useDebounceValue/useDebounceValue';
 export * from './useDefault/useDefault';
 export * from './useDeviceMotion/useDeviceMotion';
 export * from './useDeviceOrientation/useDeviceOrientation';
+export * from './useDevicePixelRatio/useDevicePixelRatio';
 export * from './useDidUpdate/useDidUpdate';
 export * from './useDisclosure/useDisclosure';
 export * from './useDocumentEvent/useDocumentEvent';

Diff for: src/hooks/useDevicePixelRatio/useDevicePixelRatio.demo.tsx

@@ -0,0 +1,13 @@
+import { useDevicePixelRatio } from './useDevicePixelRatio';
+
+const Demo = () => {
+  const { supported, ratio } = useDevicePixelRatio();
+
+  if (!supported) {
+    return <p>Device pixel ratio is not supported.</p>;
+  }
+
+  return <p>Device pixel ratio (try to zoom page in and out): {ratio}</p>;
+};
+
+export default Demo;

Diff for: src/hooks/useDevicePixelRatio/useDevicePixelRatio.test.ts

@@ -0,0 +1,88 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useDevicePixelRatio } from './useDevicePixelRatio';
+
+describe('useDevicePixelRatio', () => {
+  describe('in unsupported environment', () => {
+    afterEach(() => void vi.unstubAllGlobals());
+
+    it('should return supported as false when devicePixelRatio is not present', () => {
+      vi.stubGlobal('devicePixelRatio', undefined);
+      const { result } = renderHook(() => useDevicePixelRatio());
+      expect(result.current.supported).toBeFalsy();
+      expect(result.current.ratio).toBeNull();
+    });
+
+    it('should return supported as false when matchMedia is not a function', () => {
+      vi.stubGlobal('matchMedia', undefined);
+      const { result } = renderHook(() => useDevicePixelRatio());
+      expect(result.current.supported).toBeFalsy();
+      expect(result.current.ratio).toBeNull();
+    });
+  });
+
+  describe('in supported environment', () => {
+    const mediaQueryListMock = {
+      matches: false,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn()
+    };
+
+    beforeEach(() => {
+      vi.stubGlobal('devicePixelRatio', 2);
+      vi.stubGlobal(
+        'matchMedia',
+        vi
+          .fn<[string], MediaQueryList>()
+          .mockImplementation((query) => ({ ...mediaQueryListMock, media: query }))
+      );
+    });
+
+    afterEach(() => void vi.unstubAllGlobals());
+
+    it('should return initial devicePixelRatio and supported', () => {
+      const { result } = renderHook(() => useDevicePixelRatio());
+      expect(result.current.supported).toBeTruthy();
+      expect(result.current.ratio).toEqual(2);
+    });
+
+    it('should return ratio when devicePixelRatio changes', () => {
+      const { result } = renderHook(() => useDevicePixelRatio());
+      expect(result.current.ratio).toEqual(2);
+
+      const listener = mediaQueryListMock.addEventListener.mock.calls[0][1];
+      expect(typeof listener).toEqual('function');
+
+      Object.defineProperty(window, 'devicePixelRatio', {
+        value: 3,
+        configurable: true
+      });
+
+      act(() => {
+        listener(new MediaQueryListEvent('change'));
+      });
+
+      expect(result.current.ratio).toEqual(3);
+    });
+
+    it('should remove event listener on unmount', () => {
+      const { unmount } = renderHook(() => useDevicePixelRatio());
+
+      expect(mediaQueryListMock.addEventListener).toHaveBeenCalledWith(
+        'change',
+        expect.any(Function)
+      );
+
+      unmount();
+
+      expect(mediaQueryListMock.removeEventListener).toHaveBeenCalledWith(
+        'change',
+        expect.any(Function)
+      );
+    });
+  });
+});

Diff for: src/hooks/useDevicePixelRatio/useDevicePixelRatio.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+export interface UseDevicePixelRatioReturn {
+  /** The ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. Equals to null if only `supported` = `false`. */
+  ratio: number | null;
+  /** Indicates if devicePixelRatio is available */
+  supported: boolean;
+}
+
+/**
+ * @name useDevicePixelRatio
+ * @description - Hook that returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device
+ * @category Display
+ *
+ * @returns {UseDevicePixelRatioReturn} The ratio and supported flag
+ *
+ * @example
+ * const { supported, ratio } = useDevicePixelRatio();
+ */
+export const useDevicePixelRatio = (): UseDevicePixelRatioReturn => {
+  const [ratio, setRatio] = useState<number | null>(null);
+
+  const supported =
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    typeof window.devicePixelRatio === 'number';
+
+  useEffect(() => {
+    if (!supported) return;
+
+    const updatePixelRatio = () => setRatio(window.devicePixelRatio);
+
+    updatePixelRatio();
+
+    const media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    media.addEventListener('change', updatePixelRatio);
+    return () => media.removeEventListener('change', updatePixelRatio);
+  }, [supported]);
+
+  return { supported, ratio };
+};

Diff for: tests/setupTests.ts

@@ -2,6 +2,19 @@ import { TextEncoder } from 'node:util';
 
 globalThis.TextEncoder = TextEncoder;
 
+if (typeof window !== 'undefined' && typeof window.MediaQueryListEvent === 'undefined') {
+  class MockMediaQueryListEvent extends Event {
+    media: string;
+    matches: boolean;
+    constructor(type: string, eventInitDict?: MediaQueryListEventInit) {
+      super(type, eventInitDict);
+      this.media = eventInitDict?.media || '';
+      this.matches = eventInitDict?.matches || false;
+    }
+  }
+
+(window as any).MediaQueryListEvent = MockMediaQueryListEvent;
+
 if (typeof document !== 'undefined') {
   const target = document.createElement('div');
   target.id = 'target';