feat: add useMediaQuery

config/hooks.ts

@@ -100,6 +100,7 @@ export const menus = [
       'useScroll',
       'useSize',
       'useFocusWithin',
+      'useMediaQuery',
     ],
   },
   {

packages/hooks/src/index.ts

@@ -75,6 +75,7 @@ import useVirtualList from './useVirtualList';
 import useWebSocket from './useWebSocket';
 import useWhyDidYouUpdate from './useWhyDidYouUpdate';
 import useMutationObserver from './useMutationObserver';
+import useMediaQuery from './useMediaQuery';
 
 export {
   useRequest,
@@ -156,4 +157,5 @@ export {
   useRafTimeout,
   useResetState,
   useMutationObserver,
+  useMediaQuery,
 };

packages/hooks/src/useMediaQuery/__tests__/index.test.ts

@@ -0,0 +1,42 @@
+import { renderHook, act } from '../../utils/tests';
+import useMediaQuery from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+describe('useMediaQuery', () => {
+  function changeWidth(width: number) {
+    act(() => {
+      (global as any).innerWidth = width;
+      (global as any).dispatchEvent(new Event('resize'));
+    });
+  }
+  changeWidth(1024);
+
+  it('should be defined', () => {
+    expect(useMediaQuery).toBeDefined();
+  });
+
+  it('should return the correct value', () => {
+    const { result } = renderHook(() => useMediaQuery(['(min-width: 1024px)'], [true], false));
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should return the correct value when the media query changes', () => {
+    const { result } = renderHook(() => useMediaQuery(['(min-width: 1024px)'], [true], false));
+    expect(result.current[0]).toBe(false);
+    changeWidth(768);
+    expect(result.current[0]).toBe(false);
+  });
+});

packages/hooks/src/useMediaQuery/demo/demo1.tsx

@@ -0,0 +1,25 @@
+/**
+ * title: Get responsive info in components
+ * desc: By calling useMediaQuery in components, you can retrieve the responsive infomation of the browser page and subscribe to it at the same time.
+ *
+ * title.zh-CN: 在组件中获取响应式信息
+ * desc.zh-CN: 在组件中调用 useMediaQuery 可以获取并订阅浏览器窗口的响应式信息。
+ */
+
+import React from 'react';
+import { useMediaQuery } from 'ahooks';
+
+export default function () {
+  const [value, currentQuery] = useMediaQuery(
+    ['(min-width: 1024px)', '(min-width: 768px)', '(min-width: 320px)'],
+    [3, 2, 1],
+    0,
+  );
+
+  return (
+    <div>
+      <div>currentValue: {value.toString()}</div>
+      <div>currentQuery: {currentQuery}</div>
+    </div>
+  );
+}

packages/hooks/src/useMediaQuery/index.en-US.md

@@ -0,0 +1,25 @@
+---
+nav:
+  path: /hooks
+---
+
+# useMediaQuery
+
+React Hook for getting responsive info.
+
+## Examples
+
+### Get responsive info in components
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```typescript
+interface ResponsiveInfo {
+  value: number;
+  currentQuery: string;
+}
+
+function useMediaQuery(queries: K[], values: T[], defaultValue: T): ResponsiveInfo;
+```

packages/hooks/src/useMediaQuery/index.ts

@@ -0,0 +1,32 @@
+import { useRef, useState } from 'react';
+
+function useMediaQuery<K, T>(queries: K[], values: T[], defaultValue: T) {
+  const mediaQueryLists = useRef<MediaQueryList[]>([]);
+  const [value, setValue] = useState<T>(defaultValue);
+  const [currentQuery, setCurrentQuery] = useState<string>((queries as MediaQueryList[])[0].media);
+
+  const getValue = () => {
+    const index = mediaQueryLists.current.findIndex((mql) => mql.matches);
+    setCurrentQuery(mediaQueryLists.current?.[index]?.media || '');
+    return values?.[index] || defaultValue;
+  };
+
+  const handleQueryListener = () => setValue(getValue());
+
+  const handleMediaQueryLists = () => {
+    mediaQueryLists.current.forEach((mql) =>
+      mql.removeEventListener('change', handleQueryListener),
+    );
+    mediaQueryLists.current = queries.map((query) => query && window.matchMedia(query as string));
+    mediaQueryLists.current.forEach((mql) => mql.addEventListener('change', handleQueryListener));
+    setValue(getValue());
+  };
+
+  useState(() => {
+    handleMediaQueryLists();
+  });
+
+  return [value, currentQuery];
+}
+
+export default useMediaQuery;

packages/hooks/src/useMediaQuery/index.zh-CN.md

@@ -0,0 +1,25 @@
+---
+nav:
+  path: /hooks
+---
+
+# useMediaQuery
+
+获取响应式信息。
+
+## 代码演示
+
+### 在组件中获取响应式信息
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```typescript
+interface ResponsiveInfo {
+  value: number;
+  currentQuery: string;
+}
+
+function useMediaQuery(queries: K[], values: T[], defaultValue: T): ResponsiveInfo;
+```