extra-react-hooks 0.8.1 → 0.8.3

package/README.md

@@ -209,7 +209,7 @@ function useNumberInput(params: {
   value: number
   lazy?: boolean
 
-  onChange(value: number): void
+  onChange(value: number, isEnd: boolean): void
 }): {
   getInputProps(): Required<Pick<
     React.ComponentPropsWithoutRef<'input'>
@@ -219,3 +219,8 @@ function useNumberInput(params: {
   >>
 }
 ```
+
+### useMediaQuery
+```ts
+function useMediaQuery(query: string): boolean
+```

package/lib/index.d.ts

@@ -23,3 +23,4 @@ export * from './use-get-set.js';
 export * from './use-isomorphic-layout-effect.js';
 export * from './use-debounce.js';
 export * from './use-number-input.js';
+export * from './use-media-query.js';

package/lib/index.js

@@ -23,4 +23,5 @@ export * from './use-get-set.js';
 export * from './use-isomorphic-layout-effect.js';
 export * from './use-debounce.js';
 export * from './use-number-input.js';
+export * from './use-media-query.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA"}

package/lib/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(query: string): boolean;

package/lib/use-media-query.js

@@ -0,0 +1,15 @@
+import { useState, useMemo, useEffect } from 'react';
+export function useMediaQuery(query) {
+    const mediaQuery = useMemo(() => matchMedia(query), [query]);
+    const [matches, setMatches] = useState(mediaQuery.matches);
+    useEffect(() => {
+        updateMatches();
+        mediaQuery.addEventListener('change', updateMatches);
+        return () => mediaQuery.removeEventListener('change', updateMatches);
+        function updateMatches() {
+            setMatches(mediaQuery.matches);
+        }
+    }, [mediaQuery]);
+    return matches;
+}
+//# sourceMappingURL=use-media-query.js.map

package/lib/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","sourceRoot":"","sources":["../src/use-media-query.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAC5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,UAAU,CAAC,OAAO,CAAC,CAAA;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;QAEf,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACpD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAEpE,SAAS,aAAa;YACpB,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/use-number-input.d.ts

@@ -1,7 +1,7 @@
 export declare function useNumberInput({ value, lazy, onChange }: {
     value: number;
     lazy?: boolean;
-    onChange(value: number): void;
+    onChange(value: number, isEnd: boolean): void;
 }): {
     getInputProps(): Required<Pick<React.ComponentPropsWithoutRef<'input'>, 'value' | 'onChange' | 'onBlur'>>;
 };

package/lib/use-number-input.js

@@ -24,20 +24,25 @@ export function useNumberInput({ value, lazy, onChange }) {
                         if (!lazy) {
                             const newValue = e.target.valueAsNumber;
                             if (isntNaN(newValue) && newValue !== value) {
-                                onChange(newValue);
+                                onChange(newValue, false);
                             }
                         }
                     }
                 },
                 onBlur(e) {
                     if (e.target.checkValidity()) {
-                        if (lazy) {
-                            const newValue = e.target.valueAsNumber;
-                            if (isntNaN(newValue) && newValue !== value) {
-                                onChange(newValue);
-                                setDisplayValue(newValue.toString());
-                                return;
-                            }
+                        const newValue = e.target.valueAsNumber;
+                        if (!lazy || (isntNaN(newValue) && newValue !== value)) {
+                            onChange(newValue, true);
+                            setDisplayValue(newValue.toString());
+                            return;
+                        }
+                    }
+                    else {
+                        if (!lazy) {
+                            onChange(value, true);
+                            setDisplayValue(value.toString());
+                            return;
                         }
                     }
                     setDisplayValue(value.toString());

package/lib/use-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAKrD;IAQC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEhF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;YAGrC,IAAI,QAAQ,KAAK,KAAK;gBAAE,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAA;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YAGT,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO;QACL,aAAa;YACX,OAAO;gBACL,KAAK,EAAE,YAAY;gBACnB,QAAQ,CAAC,CAAC;oBACR,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAE/B,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;wBAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;4BAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;gCAC5C,QAAQ,CAAC,QAAQ,CAAC,CAAA;4BACpB,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;gBACD,MAAM,CAAC,CAAC;oBACN,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;wBAC7B,IAAI,IAAI,EAAE,CAAC;4BACT,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;4BAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;gCAC5C,QAAQ,CAAC,QAAQ,CAAC,CAAA;gCAIlB,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;gCAEpC,OAAM;4BACR,CAAC;wBACH,CAAC;oBACH,CAAC;oBAGD,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACnC,CAAC;aACF,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAKrD;IAQC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEhF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;YAGrC,IAAI,QAAQ,KAAK,KAAK;gBAAE,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAA;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YAGT,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO;QACL,aAAa;YACX,OAAO;gBACL,KAAK,EAAE,YAAY;gBACnB,QAAQ,CAAC,CAAC;oBACR,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAE/B,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;wBAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;4BAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;gCAC5C,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;4BAC3B,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;gBACD,MAAM,CAAC,CAAC;oBACN,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;wBAC7B,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;wBAEvC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,CAAC,EAAE,CAAC;4BACvD,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;4BAIxB,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEpC,OAAM;wBACR,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;4BAErB,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEjC,OAAM;wBACR,CAAC;oBACH,CAAC;oBAGD,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACnC,CAAC;aACF,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "",
   "keywords": [],
   "files": [
@@ -20,8 +20,7 @@
   "scripts": {
     "prepare": "ts-patch install -s",
     "lint": "eslint --quiet src __tests__",
-    "test": "karma start karma.config.cjs --single-run",
-    "test:dev": "karma start karma.config.cjs",
+    "test": "vitest --run",
     "prepublishOnly": "run-s prepare clean build",
     "clean": "rimraf lib",
     "build": "tsc --project tsconfig.build.json --outDir lib",
@@ -41,31 +40,29 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jasmine": "^5.1.5",
     "@types/react": "^19.0.7",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.9",
     "eslint": "^9.18.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "husky": "4",
-    "karma": "^6.4.4",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-jasmine": "^5.1.0",
-    "karma-webpack": "^5.0.1",
     "npm-run-all": "^4.1.5",
+    "playwright": "^1.51.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-test-renderer": "^19.0.0",
     "return-style": "^3.0.1",
     "rimraf": "^4.3.0",
     "standard-version": "^9.3.2",
-    "ts-loader": "^9.5.2",
     "ts-patch": "^3.3.0",
-    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "tslib": "^2.8.1",
     "typescript": "5.7.3",
     "typescript-eslint": "^8.20.0",
     "typescript-transform-paths": "^3.5.3",
-    "webpack": "^5.97.1"
+    "vite": "^6.2.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.9"
   },
   "dependencies": {
     "@blackglory/errors": "^3.0.3",

package/src/index.ts

@@ -23,3 +23,4 @@ export * from './use-get-set.js'
 export * from './use-isomorphic-layout-effect.js'
 export * from './use-debounce.js'
 export * from './use-number-input.js'
+export * from './use-media-query.js'

package/src/use-media-query.ts

@@ -0,0 +1,19 @@
+import { useState, useMemo, useEffect } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const mediaQuery = useMemo(() => matchMedia(query), [query])
+  const [matches, setMatches] = useState<boolean>(mediaQuery.matches)
+
+  useEffect(() => {
+    updateMatches()
+
+    mediaQuery.addEventListener('change', updateMatches)
+    return () => mediaQuery.removeEventListener('change', updateMatches)
+
+    function updateMatches(): void {
+      setMatches(mediaQuery.matches)
+    }
+  }, [mediaQuery])
+
+  return matches
+}

package/src/use-number-input.ts

@@ -5,7 +5,7 @@ export function useNumberInput({ value, lazy, onChange }: {
   value: number
   lazy?: boolean
 
-  onChange(value: number): void
+  onChange(value: number, isEnd: boolean): void
 }): {
   getInputProps(): Required<Pick<
     React.ComponentPropsWithoutRef<'input'>
@@ -45,25 +45,31 @@ export function useNumberInput({ value, lazy, onChange }: {
               const newValue = e.target.valueAsNumber
 
               if (isntNaN(newValue) && newValue !== value) {
-                onChange(newValue)
+                onChange(newValue, false)
               }
             }
           }
         }
       , onBlur(e) {
           if (e.target.checkValidity()) {
-            if (lazy) {
-              const newValue = e.target.valueAsNumber
+            const newValue = e.target.valueAsNumber
 
-              if (isntNaN(newValue) && newValue !== value) {
-                onChange(newValue)
+            if (!lazy || (isntNaN(newValue) && newValue !== value)) {
+              onChange(newValue, true)
 
-                // 使用格式化后的新值.
-                // 若hook的调用方决定不接受新值, 则displayValue的值会被覆盖.
-                setDisplayValue(newValue.toString())
+              // 使用格式化后的新值.
+              // 若hook的调用方决定不接受新值, 则displayValue的值会被覆盖.
+              setDisplayValue(newValue.toString())
 
-                return
-              }
+              return
+            }
+          } else {
+            if (!lazy) {
+              onChange(value, true)
+
+              setDisplayValue(value.toString())
+
+              return
             }
           }