@d-matrix/utils 1.18.1 → 1.19.0

package/dist/react/index.d.ts

@@ -7,3 +7,5 @@ export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
 export * from './useForwardRef';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';

package/dist/react/index.js

@@ -7,3 +7,5 @@ export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
 export * from './useForwardRef';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';

package/dist/react/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/react/useIsomorphicLayoutEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/react/useMediaQuery.d.ts

@@ -0,0 +1,14 @@
+declare type UseMediaQueryOptions = {
+    /**
+     * The default value to return if the hook is being run on the server.
+     * @default false
+     */
+    defaultValue?: boolean;
+    /**
+     * If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
+     * @default true
+     */
+    initializeWithValue?: boolean;
+};
+export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue }?: UseMediaQueryOptions): boolean;
+export {};

package/dist/react/useMediaQuery.js

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+const IS_SERVER = typeof window === 'undefined';
+export function useMediaQuery(query, { defaultValue = false, initializeWithValue = true } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d-matrix/utils",
   "sideEffects": false,
-  "version": "1.18.1",
+  "version": "1.19.0",
   "description": "A dozen of utils for Front-End Development",
   "main": "dist/index.js",
   "scripts": {

package/readme.md

@@ -178,6 +178,24 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithRef<'in
 });
 ```
 
+- `useMediaQuery(query, options?): boolean`
+
+使用[Match Media API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) 检测当前document是否匹配media query
+
+```ts
+import { useMediaQuery } from '@d-matrix/utils/react'
+
+export default function Component() {
+  const matches = useMediaQuery('(min-width: 768px)')
+
+  return (
+    <div>
+      {`The view port is ${matches ? 'at least' : 'less than'} 768 pixels wide`}
+    </div>
+  )
+}
+```
+
 ### dom
 
 - `scrollToTop(element: Element | null | undefined): void`