extra-react-hooks 0.8.0 → 0.8.1

package/README.md

@@ -63,7 +63,7 @@ function useUnmount(effect: () => void): void
 ```ts
 function useEffectAsync(
   effect: (signal: AbortSignal) => Promise<void>
-, deps?: DependencyList
+, deps?: React.DependencyList
 ): void
 ```
 
@@ -71,7 +71,7 @@ function useEffectAsync(
 ```ts
 function useAbortableCallback<Args extends unknown[], Result>(
   callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
-, deps: DependencyList
+, deps: React.DependencyList
 ): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result>
 ```
 
@@ -190,6 +190,32 @@ function useGetSet<T>(
 ```ts
 function useIsomorphicLayoutEffect(
   effect: EffectCallback
-, deps?: DependencyList
+, deps?: React.DependencyList
 ): void
 ```
+
+### useDebounce
+```ts
+function useDebounce<Args extends unknown[]>(
+  fn: (...args: Args) => void
+, timeout: number
+, deps?: React.DependencyList
+): (...args: Args) => void
+```
+
+### useNumberInput
+```ts
+function useNumberInput(params: {
+  value: number
+  lazy?: boolean
+
+  onChange(value: number): void
+}): {
+  getInputProps(): Required<Pick<
+    React.ComponentPropsWithoutRef<'input'>
+  , 'value'
+  | 'onChange'
+  | 'onBlur'
+  >>
+}
+```

package/lib/index.d.ts

@@ -21,3 +21,5 @@ export * from './use-iife.js';
 export * from './use-memo-with-cleanup.js';
 export * from './use-get-set.js';
 export * from './use-isomorphic-layout-effect.js';
+export * from './use-debounce.js';
+export * from './use-number-input.js';

package/lib/index.js

@@ -21,4 +21,6 @@ export * from './use-iife.js';
 export * from './use-memo-with-cleanup.js';
 export * from './use-get-set.js';
 export * from './use-isomorphic-layout-effect.js';
+export * from './use-debounce.js';
+export * from './use-number-input.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"}
+{"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"}

package/lib/use-abortable-callback.d.ts

@@ -1,3 +1,2 @@
-import { DependencyList } from 'react';
 import { Falsy } from '@blackglory/prelude';
-export declare function useAbortableCallback<Args extends unknown[], Result>(callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>, deps: DependencyList): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result>;
+export declare function useAbortableCallback<Args extends unknown[], Result>(callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>, deps: React.DependencyList): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result>;

package/lib/use-abortable-callback.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-abortable-callback.js","sourceRoot":"","sources":["../src/use-abortable-callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAG/D,MAAM,UAAU,oBAAoB,CAClC,QAAgF,EAChF,IAAoB;IAEpB,MAAM,UAAU,GAAG,kBAAkB,CACnC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAC3B,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,EAChC,IAAI,CACL,CAAA;IAED,OAAO,WAAW,CAAC,KAAK,EAAE,GAAG,IAAkD,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,gBAAgB,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAwB;YAC5C,UAAU,CAAC,MAAM;SAClB,CAAC,CAAA;QACF,MAAM,CAAC,cAAc,EAAE,CAAA;QAEvB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAS,CAAA;QAE1C,OAAO,MAAM,QAAQ,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,CAAA;AAC3B,CAAC"}
+{"version":3,"file":"use-abortable-callback.js","sourceRoot":"","sources":["../src/use-abortable-callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAG/D,MAAM,UAAU,oBAAoB,CAClC,QAAgF,EAChF,IAA0B;IAE1B,MAAM,UAAU,GAAG,kBAAkB,CACnC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAC3B,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,EAChC,IAAI,CACL,CAAA;IAED,OAAO,WAAW,CAAC,KAAK,EAAE,GAAG,IAAkD,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,gBAAgB,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAwB;YAC5C,UAAU,CAAC,MAAM;SAClB,CAAC,CAAA;QACF,MAAM,CAAC,cAAc,EAAE,CAAA;QAEvB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAS,CAAA;QAE1C,OAAO,MAAM,QAAQ,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,CAAA;AAC3B,CAAC"}

package/lib/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<Args extends unknown[]>(fn: (...args: Args) => void, timeout: number, deps?: React.DependencyList): (...args: Args) => void;

package/lib/use-debounce.js

@@ -0,0 +1,18 @@
+import { useRef, useEffect } from 'react';
+import { setTimeout } from 'extra-timers';
+export function useDebounce(fn, timeout, deps) {
+    const fnRef = useRef(fn);
+    const cancelTimeoutRef = useRef(undefined);
+    useEffect(() => {
+        fnRef.current = fn;
+    }, deps);
+    return (...args) => {
+        var _a;
+        (_a = cancelTimeoutRef.current) === null || _a === void 0 ? void 0 : _a.call(cancelTimeoutRef);
+        cancelTimeoutRef.current = setTimeout(timeout, () => {
+            fnRef.current(...args);
+            cancelTimeoutRef.current = undefined;
+        });
+    };
+}
+//# sourceMappingURL=use-debounce.js.map

package/lib/use-debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.js","sourceRoot":"","sources":["../src/use-debounce.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,UAAU,WAAW,CACzB,EAA2B,EAC3B,OAAe,EACf,IAA2B;IAE3B,MAAM,KAAK,GAAG,MAAM,CAA0B,EAAE,CAAC,CAAA;IACjD,MAAM,gBAAgB,GAAG,MAAM,CAAa,SAAS,CAAC,CAAA;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,OAAO,GAAG,EAAE,CAAA;IACpB,CAAC,EAAE,IAAI,CAAC,CAAA;IAER,OAAO,CAAC,GAAG,IAAU,EAAQ,EAAE;;QAC7B,MAAA,gBAAgB,CAAC,OAAO,gEAAI,CAAA;QAE5B,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,GAAG,EAAE;YAClD,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,CAAA;YAEtB,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;AACH,CAAC"}

package/lib/use-effect-async.d.ts

@@ -1,2 +1 @@
-import { DependencyList } from 'react';
-export declare function useEffectAsync(effect: (signal: AbortSignal) => Promise<void>, deps?: DependencyList): void;
+export declare function useEffectAsync(effect: (signal: AbortSignal) => Promise<void>, deps?: React.DependencyList): void;

package/lib/use-effect-async.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-effect-async.js","sourceRoot":"","sources":["../src/use-effect-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,kBAAmB,SAAQ,WAAW;CAAG;AAE/C,MAAM,UAAU,cAAc,CAC5B,MAA8C,EAC9C,IAAqB;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAA;QAExC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI,CAAC;gBACH,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,CAAA;gBAElC,MAAM,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;YACjC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,GAAG,YAAY,kBAAkB,EAAE,CAAC;oBACtC,IAAI,EAAE,CAAA;gBACR,CAAC;qBAAM,CAAC;oBACN,MAAM,GAAG,CAAA;gBACX,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAA;IACzD,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
+{"version":3,"file":"use-effect-async.js","sourceRoot":"","sources":["../src/use-effect-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,kBAAmB,SAAQ,WAAW;CAAG;AAE/C,MAAM,UAAU,cAAc,CAC5B,MAA8C,EAC9C,IAA2B;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAA;QAExC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI,CAAC;gBACH,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,CAAA;gBAElC,MAAM,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;YACjC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,GAAG,YAAY,kBAAkB,EAAE,CAAC;oBACtC,IAAI,EAAE,CAAA;gBACR,CAAC;qBAAM,CAAC;oBACN,MAAM,GAAG,CAAA;gBACX,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAA;IACzD,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

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

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

package/lib/use-number-input.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { isntNaN } from 'extra-utils';
+export function useNumberInput({ value, lazy, onChange }) {
+    const [displayValue, setDisplayValue] = useState(() => value.toString());
+    useEffect(() => {
+        if (!lazy) {
+            const oldValue = Number(displayValue);
+            if (oldValue !== value)
+                setDisplayValue(value.toString());
+        }
+    }, [value, displayValue]);
+    useEffect(() => {
+        if (lazy) {
+            setDisplayValue(value.toString());
+        }
+    }, [value]);
+    return {
+        getInputProps() {
+            return {
+                value: displayValue,
+                onChange(e) {
+                    setDisplayValue(e.target.value);
+                    if (e.target.reportValidity()) {
+                        if (!lazy) {
+                            const newValue = e.target.valueAsNumber;
+                            if (isntNaN(newValue) && newValue !== value) {
+                                onChange(newValue);
+                            }
+                        }
+                    }
+                },
+                onBlur(e) {
+                    if (e.target.checkValidity()) {
+                        if (lazy) {
+                            const newValue = e.target.valueAsNumber;
+                            if (isntNaN(newValue) && newValue !== value) {
+                                onChange(newValue);
+                                setDisplayValue(newValue.toString());
+                                return;
+                            }
+                        }
+                    }
+                    setDisplayValue(value.toString());
+                }
+            };
+        }
+    };
+}
+//# sourceMappingURL=use-number-input.js.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "",
   "keywords": [],
   "files": [
@@ -40,6 +40,7 @@
     "@eslint/js": "^9.18.0",
     "@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",
     "eslint": "^9.18.0",
@@ -71,6 +72,7 @@
     "@blackglory/prelude": "^0.4.0",
     "extra-abort": "^0.4.0",
     "extra-fsm": "^0.2.1",
+    "extra-timers": "^0.2.6",
     "extra-utils": "^5.17.0",
     "rxjs": "^7.8.1"
   },

package/src/index.ts

@@ -21,3 +21,5 @@ export * from './use-iife.js'
 export * from './use-memo-with-cleanup.js'
 export * from './use-get-set.js'
 export * from './use-isomorphic-layout-effect.js'
+export * from './use-debounce.js'
+export * from './use-number-input.js'

package/src/use-abortable-callback.ts

@@ -1,11 +1,11 @@
-import { useCallback, DependencyList } from 'react'
+import { useCallback } from 'react'
 import { AbortController, raceAbortSignals } from 'extra-abort'
 import { useMemoWithCleanup } from './use-memo-with-cleanup.js'
 import { Falsy } from '@blackglory/prelude'
 
 export function useAbortableCallback<Args extends unknown[], Result>(
   callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
-, deps: DependencyList
+, deps: React.DependencyList
 ): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result> {
   const controller = useMemoWithCleanup(
     () => new AbortController()

package/src/use-debounce.ts

@@ -0,0 +1,25 @@
+import { useRef, useEffect } from 'react'
+import { setTimeout } from 'extra-timers'
+
+export function useDebounce<Args extends unknown[]>(
+  fn: (...args: Args) => void
+, timeout: number
+, deps?: React.DependencyList
+): (...args: Args) => void {
+  const fnRef = useRef<(...args: Args) => void>(fn)
+  const cancelTimeoutRef = useRef<() => void>(undefined)
+
+  useEffect(() => {
+    fnRef.current = fn
+  }, deps)
+
+  return (...args: Args): void => {
+    cancelTimeoutRef.current?.()
+
+    cancelTimeoutRef.current = setTimeout(timeout, () => {
+      fnRef.current(...args)
+
+      cancelTimeoutRef.current = undefined
+    })
+  }
+}

package/src/use-effect-async.ts

@@ -1,4 +1,4 @@
-import { useEffect, DependencyList } from 'react'
+import { useEffect } from 'react'
 import { go, pass } from '@blackglory/prelude'
 import { AbortController } from 'extra-abort'
 import { CustomError } from '@blackglory/errors'
@@ -7,7 +7,7 @@ class InternalAbortError extends CustomError {}
 
 export function useEffectAsync(
   effect: (signal: AbortSignal) => Promise<void>
-, deps?: DependencyList
+, deps?: React.DependencyList
 ): void {
   useEffect(() => {
     const controller = new AbortController()

package/src/use-number-input.ts

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+import { isntNaN } from 'extra-utils'
+
+export function useNumberInput({ value, lazy, onChange }: {
+  value: number
+  lazy?: boolean
+
+  onChange(value: number): void
+}): {
+  getInputProps(): Required<Pick<
+    React.ComponentPropsWithoutRef<'input'>
+  , 'value'
+  | 'onChange'
+  | 'onBlur'
+  >>
+} {
+  const [displayValue, setDisplayValue] = useState<string>(() => value.toString())
+
+  useEffect(() => {
+    if (!lazy) {
+      const oldValue = Number(displayValue)
+
+      // 以传入的值为准, 但只有在实际代表的值不同时, 才更新.
+      if (oldValue !== value) setDisplayValue(value.toString())
+    }
+  }, [value, displayValue])
+
+  useEffect(() => {
+    if (lazy) {
+      // 以传入的值为准.
+      // 由于onChange是惰性调用, 不需要检查值的相等性.
+      setDisplayValue(value.toString())
+    }
+  }, [value])
+
+  return {
+    getInputProps() {
+      return {
+        value: displayValue
+      , onChange(e) {
+          setDisplayValue(e.target.value)
+
+          if (e.target.reportValidity()) {
+            if (!lazy) {
+              const newValue = e.target.valueAsNumber
+
+              if (isntNaN(newValue) && newValue !== value) {
+                onChange(newValue)
+              }
+            }
+          }
+        }
+      , onBlur(e) {
+          if (e.target.checkValidity()) {
+            if (lazy) {
+              const newValue = e.target.valueAsNumber
+
+              if (isntNaN(newValue) && newValue !== value) {
+                onChange(newValue)
+
+                // 使用格式化后的新值.
+                // 若hook的调用方决定不接受新值, 则displayValue的值会被覆盖.
+                setDisplayValue(newValue.toString())
+
+                return
+              }
+            }
+          }
+
+          // 继续使用旧值, 但对旧值格式化.
+          setDisplayValue(value.toString())
+        }
+      }
+    }
+  }
+}