extra-react-hooks 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -0,0 +1,227 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [0.6.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.6.1...v0.6.2) (2023-06-13)
+
+
+### Bug Fixes
+
+* **useCallbackAsync:** replace useEffect with useLayoutEffect ([8f8f5f5](https://github.com/BlackGlory/extra-react-hooks/commit/8f8f5f511444bd30132e9eadb781a1a72ccbacb3))
+
+### [0.6.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.6.0...v0.6.1) (2023-06-13)
+
+
+### Bug Fixes
+
+* **useCallbackAsync:** deps ([3a13d8f](https://github.com/BlackGlory/extra-react-hooks/commit/3a13d8f86c51c52fd6af65da61734608487f595d))
+
+## [0.6.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.4...v0.6.0) (2023-06-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* Removed React v16 support
+
+* remove React v16 support ([919613e](https://github.com/BlackGlory/extra-react-hooks/commit/919613e08b8c89803b2063e33444f8c21d328198))
+
+### [0.5.4](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.3...v0.5.4) (2023-06-12)
+
+
+### Bug Fixes
+
+* deps for React 18 ([4b98acd](https://github.com/BlackGlory/extra-react-hooks/commit/4b98acd9fee6bca2ae448e6628bf6c016c8ce994))
+
+### [0.5.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.2...v0.5.3) (2023-06-10)
+
+
+### Bug Fixes
+
+* export src ([d8d24e3](https://github.com/BlackGlory/extra-react-hooks/commit/d8d24e3fadea11e266c6276dc4cd7cf3a90910b8))
+
+### [0.5.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.1...v0.5.2) (2023-04-17)
+
+
+### Features
+
+* add `useMountAsync` ([90f43bd](https://github.com/BlackGlory/extra-react-hooks/commit/90f43bd05005f6f80653405e209c3ccfb96265d9))
+
+### [0.5.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.0...v0.5.1) (2023-04-16)
+
+
+### Features
+
+* add `useEffectAsync`, `useCallbackAsync` ([f01bf2e](https://github.com/BlackGlory/extra-react-hooks/commit/f01bf2ed298ff741806b93a098c842671e9fe492))
+
+## [0.5.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.3...v0.5.0) (2023-03-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* The minimal version of Node.js is 16
+
+* upgrade dependencies ([c4f0e97](https://github.com/BlackGlory/extra-react-hooks/commit/c4f0e97c89e752491a4bc2a036946c54c70a8929))
+
+### [0.4.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.2...v0.4.3) (2023-01-28)
+
+
+### Bug Fixes
+
+* dependencies ([c04a0ac](https://github.com/BlackGlory/extra-react-hooks/commit/c04a0acf76476c37f7dbc52de843df828d333d52))
+
+### [0.4.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.1...v0.4.2) (2023-01-22)
+
+### [0.4.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.0...v0.4.1) (2023-01-21)
+
+
+### Bug Fixes
+
+* exports ([6782f4a](https://github.com/BlackGlory/extra-react-hooks/commit/6782f4a40921a8d5bc0fa4f38fc37b218ba5a989))
+
+## [0.4.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.4...v0.4.0) (2023-01-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* CommonJS => ESM
+
+* commonjs => esm, remove es2015 support ([a560890](https://github.com/BlackGlory/extra-react-hooks/commit/a560890e0d48892c37efa1e3e0a474816ecedae4))
+
+### [0.3.4](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.3...v0.3.4) (2023-01-21)
+
+### [0.3.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.2...v0.3.3) (2022-10-24)
+
+### [0.3.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.1...v0.3.2) (2022-09-24)
+
+### [0.3.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.0...v0.3.1) (2022-07-22)
+
+
+### Bug Fixes
+
+* toggle ([3075106](https://github.com/BlackGlory/extra-react-hooks/commit/307510652ed2e286d729c12e303231df1aa2bc20))
+
+## [0.3.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.2.1...v0.3.0) (2022-07-22)
+
+
+### ⚠ BREAKING CHANGES
+
+* - Rewrite `useSingleSelection`
+- Rewrite `useMultipleSelection`
+
+### Features
+
+* add useUnmount, useIIFE ([fb5eb9d](https://github.com/BlackGlory/extra-react-hooks/commit/fb5eb9d181c461c2eeac9f497b7a551482763049))
+
+
+### Bug Fixes
+
+* add props into deps ([def8482](https://github.com/BlackGlory/extra-react-hooks/commit/def8482f3d944bd304cf834e89fa5154b0dbb223))
+
+
+* improve hooks ([69932c2](https://github.com/BlackGlory/extra-react-hooks/commit/69932c2d2a420dc04225dcf245a2bbc3fd03f1fd))
+
+### [0.2.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.2.0...v0.2.1) (2022-07-21)
+
+## [0.2.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.15...v0.2.0) (2022-07-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* - The return value of `useSingleSelection`:
+  - Rename `value` to `selectedValue`
+- The return value of `useMultipleSelection`:
+  - Rename `values` to `selectedValues`
+
+* rename props of return values ([87e357b](https://github.com/BlackGlory/extra-react-hooks/commit/87e357be9e502cd915b4505979184bf85f2819ba))
+
+### [0.1.15](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.14...v0.1.15) (2022-07-21)
+
+
+### Features
+
+* add useRenderCounter ([c522357](https://github.com/BlackGlory/extra-react-hooks/commit/c5223571d7e1d83cd49349b8e17c005a898e4b0a))
+
+### [0.1.14](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.13...v0.1.14) (2022-07-21)
+
+
+### Features
+
+* add useIsFirstRender, useUpdateEffect ([b4f315b](https://github.com/BlackGlory/extra-react-hooks/commit/b4f315bcd8f6fd367bdb8044bade741bbdc8d9b9))
+
+### [0.1.13](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.12...v0.1.13) (2022-07-21)
+
+
+### Features
+
+* add useMultipleSelection ([2dcfbe6](https://github.com/BlackGlory/extra-react-hooks/commit/2dcfbe65f713bf35915eec967d400c5c44b86e7c))
+
+### [0.1.12](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.11...v0.1.12) (2022-06-20)
+
+### [0.1.11](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.10...v0.1.11) (2022-03-19)
+
+### [0.1.10](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.9...v0.1.10) (2022-01-05)
+
+### [0.1.9](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.8...v0.1.9) (2021-12-13)
+
+
+### Features
+
+* add useFiniteStateMachine ([e6e8962](https://github.com/BlackGlory/extra-react-hooks/commit/e6e8962724774a8b217a1fd5332c13ba4ee051f7))
+
+### [0.1.8](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.7...v0.1.8) (2021-12-13)
+
+
+### Features
+
+* add useForceUpdate ([f747227](https://github.com/BlackGlory/extra-react-hooks/commit/f747227c02c5bb2f0a0f1889de1c022bc9ca1e4d))
+
+### [0.1.7](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.6...v0.1.7) (2021-12-10)
+
+
+### Features
+
+* add useStep ([f404846](https://github.com/BlackGlory/extra-react-hooks/commit/f4048462cc254499d7fd06cd51e16e98acd978ca))
+
+### [0.1.6](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.5...v0.1.6) (2021-11-15)
+
+
+### Features
+
+* add useResizeObserver ([8a4e317](https://github.com/BlackGlory/extra-react-hooks/commit/8a4e317921387fa26e768796e52c8fe44e9b347e))
+
+### [0.1.5](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.4...v0.1.5) (2021-10-04)
+
+
+### Features
+
+* add useIncrement ([e5f1fc4](https://github.com/BlackGlory/extra-react-hooks/commit/e5f1fc442a2c69aa490fed873cc21fe4ad9ff76b))
+
+### [0.1.4](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.3...v0.1.4) (2021-08-18)
+
+
+### Features
+
+* add useIsMounted ([32a1295](https://github.com/BlackGlory/extra-react-hooks/commit/32a12951aab92ae5734f4caddf45021e2bbed793))
+
+### [0.1.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.2...v0.1.3) (2021-08-18)
+
+
+### Features
+
+* add useStateCycle ([a48da21](https://github.com/BlackGlory/extra-react-hooks/commit/a48da211f364688daa63a0bd5406fa2f2c61eba7))
+
+### [0.1.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.1...v0.1.2) (2021-07-03)
+
+### [0.1.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.0...v0.1.1) (2021-06-29)
+
+
+### Features
+
+* add useMount ([070045a](https://github.com/BlackGlory/extra-react-hooks/commit/070045ac0f209712eadd0f4e79c1328d20745b04))
+
+## 0.1.0 (2021-06-04)
+
+
+### Features
+
+* add useToggle, useSingleSelection ([0b9ee92](https://github.com/BlackGlory/extra-react-hooks/commit/0b9ee92597a230989b51b7242f529f0a36590d1f))

package/lib/index.d.ts

@@ -1,19 +1,19 @@
-export * from './use-increment.js';
-export * from './use-is-mounted.js';
-export * from './use-is-first-render.js';
-export * from './use-render-counter.js';
-export * from './use-mount.js';
-export * from './use-mount-async.js';
-export * from './use-unmount.js';
-export * from './use-effect-async.js';
-export * from './use-callback-async.js';
-export * from './use-update-effect.js';
-export * from './use-single-selection.js';
-export * from './use-multiple-selection.js';
-export * from './use-state-cycle.js';
-export * from './use-toggle.js';
-export * from './use-resize-observer.js';
-export * from './use-step.js';
-export * from './use-force-update.js';
-export * from './use-finite-state-machine.js';
-export * from './use-iife.js';
+export * from './use-increment.js';
+export * from './use-is-mounted.js';
+export * from './use-is-first-render.js';
+export * from './use-render-counter.js';
+export * from './use-mount.js';
+export * from './use-mount-async.js';
+export * from './use-unmount.js';
+export * from './use-effect-async.js';
+export * from './use-callback-async.js';
+export * from './use-update-effect.js';
+export * from './use-single-selection.js';
+export * from './use-multiple-selection.js';
+export * from './use-state-cycle.js';
+export * from './use-toggle.js';
+export * from './use-resize-observer.js';
+export * from './use-step.js';
+export * from './use-force-update.js';
+export * from './use-finite-state-machine.js';
+export * from './use-iife.js';

package/lib/index.js

@@ -1,20 +1,20 @@
-export * from './use-increment.js';
-export * from './use-is-mounted.js';
-export * from './use-is-first-render.js';
-export * from './use-render-counter.js';
-export * from './use-mount.js';
-export * from './use-mount-async.js';
-export * from './use-unmount.js';
-export * from './use-effect-async.js';
-export * from './use-callback-async.js';
-export * from './use-update-effect.js';
-export * from './use-single-selection.js';
-export * from './use-multiple-selection.js';
-export * from './use-state-cycle.js';
-export * from './use-toggle.js';
-export * from './use-resize-observer.js';
-export * from './use-step.js';
-export * from './use-force-update.js';
-export * from './use-finite-state-machine.js';
-export * from './use-iife.js';
+export * from './use-increment.js';
+export * from './use-is-mounted.js';
+export * from './use-is-first-render.js';
+export * from './use-render-counter.js';
+export * from './use-mount.js';
+export * from './use-mount-async.js';
+export * from './use-unmount.js';
+export * from './use-effect-async.js';
+export * from './use-callback-async.js';
+export * from './use-update-effect.js';
+export * from './use-single-selection.js';
+export * from './use-multiple-selection.js';
+export * from './use-state-cycle.js';
+export * from './use-toggle.js';
+export * from './use-resize-observer.js';
+export * from './use-step.js';
+export * from './use-force-update.js';
+export * from './use-finite-state-machine.js';
+export * from './use-iife.js';
 //# sourceMappingURL=index.js.map

package/lib/types.d.ts

@@ -1,3 +1,3 @@
-export interface IOptionState {
-    selected: boolean;
-}
+export interface IOptionState {
+    selected: boolean;
+}

package/lib/types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=types.js.map

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

@@ -1,2 +1,2 @@
-import { DependencyList } from 'react';
-export declare function useCallbackAsync<Args extends unknown[]>(callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>, deps: DependencyList): (...args: Args) => void;
+import { DependencyList } from 'react';
+export declare function useCallbackAsync<Args extends unknown[]>(callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>, deps: DependencyList): (...args: Args) => void;

package/lib/use-callback-async.js

@@ -1,20 +1,22 @@
-import { useEffect, useCallback, useMemo } from 'react';
-import { go } from '@blackglory/prelude';
-import { AbortController } from 'extra-abort';
-const abort = Symbol();
-export function useCallbackAsync(callback, deps) {
-    const controller = useMemo(() => new AbortController(), deps);
-    useEffect(() => () => controller.abort(abort), [controller]);
-    return useCallback((...args) => {
-        go(async () => {
-            try {
-                await callback(...args, controller.signal);
-            }
-            catch (err) {
-                if (err !== abort)
-                    throw err;
-            }
-        });
-    }, [callback, controller]);
-}
+import { useLayoutEffect, useCallback, useMemo } from 'react';
+import { go } from '@blackglory/prelude';
+import { AbortController } from 'extra-abort';
+const abort = Symbol();
+export function useCallbackAsync(callback, deps) {
+    const controller = useMemo(() => new AbortController(), deps);
+    useLayoutEffect(() => {
+        return () => controller.abort(abort);
+    }, [controller]);
+    return useCallback((...args) => {
+        go(async () => {
+            try {
+                await callback(...args, controller.signal);
+            }
+            catch (err) {
+                if (err !== abort)
+                    throw err;
+            }
+        });
+    }, [controller]);
+}
 //# sourceMappingURL=use-callback-async.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,IAAI,CAAC,CAAA;IAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAE5D,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;AAC5B,CAAC"}
+{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,IAAI,CAAC,CAAA;IAC7D,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACtC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;AAClB,CAAC"}

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

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

package/lib/use-effect-async.js

@@ -1,20 +1,20 @@
-import { useEffect } from 'react';
-import { go } from '@blackglory/prelude';
-import { AbortController } from 'extra-abort';
-const abort = Symbol();
-export function useEffectAsync(effect, deps) {
-    useEffect(() => {
-        const controller = new AbortController();
-        go(async () => {
-            try {
-                await effect(controller.signal);
-            }
-            catch (err) {
-                if (err !== abort)
-                    throw err;
-            }
-        });
-        return () => controller.abort();
-    }, deps);
-}
+import { useEffect } from 'react';
+import { go } from '@blackglory/prelude';
+import { AbortController } from 'extra-abort';
+const abort = Symbol();
+export function useEffectAsync(effect, deps) {
+    useEffect(() => {
+        const controller = new AbortController();
+        go(async () => {
+            try {
+                await effect(controller.signal);
+            }
+            catch (err) {
+                if (err !== abort)
+                    throw err;
+            }
+        });
+        return () => controller.abort();
+    }, deps);
+}
 //# sourceMappingURL=use-effect-async.js.map

package/lib/use-finite-state-machine.d.ts

@@ -1,3 +1,3 @@
-import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
-export type { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
-export declare function useFiniteStateMachine<State extends string, Event extends string>(schema: IFiniteStateMachineSchema<State, Event>, initialState: State): ObservableFiniteStateMachine<State, Event>;
+import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
+export type { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
+export declare function useFiniteStateMachine<State extends string, Event extends string>(schema: IFiniteStateMachineSchema<State, Event>, initialState: State): ObservableFiniteStateMachine<State, Event>;

package/lib/use-finite-state-machine.js

@@ -1,14 +1,14 @@
-import { useMemo, useEffect } from 'react';
-import { ObservableFiniteStateMachine } from 'extra-fsm';
-import { useForceUpdate } from './use-force-update.js';
-export function useFiniteStateMachine(schema, initialState) {
-    const forceUpdate = useForceUpdate();
-    const fsm = useMemo(() => new ObservableFiniteStateMachine(schema, initialState), [schema, initialState]);
-    useEffect(() => {
-        const observable = fsm.observeStateChanges();
-        const subscription = observable.subscribe(() => forceUpdate());
-        return () => subscription.unsubscribe();
-    }, [fsm]);
-    return fsm;
-}
+import { useMemo, useEffect } from 'react';
+import { ObservableFiniteStateMachine } from 'extra-fsm';
+import { useForceUpdate } from './use-force-update.js';
+export function useFiniteStateMachine(schema, initialState) {
+    const forceUpdate = useForceUpdate();
+    const fsm = useMemo(() => new ObservableFiniteStateMachine(schema, initialState), [schema, initialState]);
+    useEffect(() => {
+        const observable = fsm.observeStateChanges();
+        const subscription = observable.subscribe(() => forceUpdate());
+        return () => subscription.unsubscribe();
+    }, [fsm]);
+    return fsm;
+}
 //# sourceMappingURL=use-finite-state-machine.js.map

package/lib/use-force-update.d.ts

@@ -1 +1 @@
-export declare function useForceUpdate(): () => void;
+export declare function useForceUpdate(): () => void;

package/lib/use-force-update.js

@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react';
-export function useForceUpdate() {
-    const [, setState] = useState({});
-    return useCallback(forceUpdate, []);
-    function forceUpdate() {
-        setState({});
-    }
-}
+import { useState, useCallback } from 'react';
+export function useForceUpdate() {
+    const [, setState] = useState({});
+    return useCallback(forceUpdate, []);
+    function forceUpdate() {
+        setState({});
+    }
+}
 //# sourceMappingURL=use-force-update.js.map

package/lib/use-iife.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function useIIFE(iife: () => void, deps: React.DependencyList): void;
+/// <reference types="react" />
+export declare function useIIFE(iife: () => void, deps: React.DependencyList): void;

package/lib/use-iife.js

@@ -1,21 +1,21 @@
-import { useRef } from 'react';
-import { useIsFirstRender } from "./use-is-first-render.js";
-export function useIIFE(iife, deps) {
-    const oldDeps = useRef([]);
-    const isFirstRender = useIsFirstRender();
-    if (isFirstRender()) {
-        iife();
-    }
-    else {
-        if (deps.length === oldDeps.current.length) {
-            if (deps.some((x, i) => x !== oldDeps.current[i])) {
-                iife();
-            }
-        }
-        else {
-            iife();
-        }
-    }
-    oldDeps.current = Array.from(deps);
-}
+import { useRef } from 'react';
+import { useIsFirstRender } from "./use-is-first-render.js";
+export function useIIFE(iife, deps) {
+    const oldDeps = useRef([]);
+    const isFirstRender = useIsFirstRender();
+    if (isFirstRender()) {
+        iife();
+    }
+    else {
+        if (deps.length === oldDeps.current.length) {
+            if (deps.some((x, i) => x !== oldDeps.current[i])) {
+                iife();
+            }
+        }
+        else {
+            iife();
+        }
+    }
+    oldDeps.current = Array.from(deps);
+}
 //# sourceMappingURL=use-iife.js.map

package/lib/use-increment.d.ts

@@ -1 +1 @@
-export declare function useIncrement(initialValue: number): [value: number, increment: (step?: number) => void, reset: () => void];
+export declare function useIncrement(initialValue: number): [value: number, increment: (step?: number) => void, reset: () => void];

package/lib/use-increment.js

@@ -1,12 +1,12 @@
-import { useState, useCallback } from 'react';
-export function useIncrement(initialValue) {
-    const [value, setValue] = useState(initialValue);
-    return [value, useCallback(increment, []), useCallback(reset, [])];
-    function increment(step = 1) {
-        setValue(value => value + step);
-    }
-    function reset() {
-        setValue(initialValue);
-    }
-}
+import { useState, useCallback } from 'react';
+export function useIncrement(initialValue) {
+    const [value, setValue] = useState(initialValue);
+    return [value, useCallback(increment, []), useCallback(reset, [])];
+    function increment(step = 1) {
+        setValue(value => value + step);
+    }
+    function reset() {
+        setValue(initialValue);
+    }
+}
 //# sourceMappingURL=use-increment.js.map

package/lib/use-is-first-render.d.ts

@@ -1 +1 @@
-export declare function useIsFirstRender(): () => boolean;
+export declare function useIsFirstRender(): () => boolean;

package/lib/use-is-first-render.js

@@ -1,24 +1,24 @@
-import { useRef, useCallback } from 'react';
-var State;
-(function (State) {
-    State[State["InitialValue"] = 0] = "InitialValue";
-    State[State["First"] = 1] = "First";
-    State[State["NotFirst"] = 2] = "NotFirst";
-})(State || (State = {}));
-export function useIsFirstRender() {
-    const state = useRef(State.InitialValue);
-    switch (state.current) {
-        case State.InitialValue:
-            state.current = State.First;
-            break;
-        case State.First:
-            state.current = State.NotFirst;
-            break;
-        case State.NotFirst: break;
-    }
-    return useCallback(isFirstRender, []);
-    function isFirstRender() {
-        return state.current === State.First;
-    }
-}
+import { useRef, useCallback } from 'react';
+var State;
+(function (State) {
+    State[State["InitialValue"] = 0] = "InitialValue";
+    State[State["First"] = 1] = "First";
+    State[State["NotFirst"] = 2] = "NotFirst";
+})(State || (State = {}));
+export function useIsFirstRender() {
+    const state = useRef(State.InitialValue);
+    switch (state.current) {
+        case State.InitialValue:
+            state.current = State.First;
+            break;
+        case State.First:
+            state.current = State.NotFirst;
+            break;
+        case State.NotFirst: break;
+    }
+    return useCallback(isFirstRender, []);
+    function isFirstRender() {
+        return state.current === State.First;
+    }
+}
 //# sourceMappingURL=use-is-first-render.js.map

package/lib/use-is-mounted.d.ts

@@ -1 +1 @@
-export declare function useIsMounted(): () => boolean;
+export declare function useIsMounted(): () => boolean;

package/lib/use-is-mounted.js

@@ -1,16 +1,16 @@
-import { useRef, useCallback } from 'react';
-import { useMount } from './use-mount.js';
-export function useIsMounted() {
-    const mounted = useRef(false);
-    useMount(() => {
-        mounted.current = true;
-        return () => {
-            mounted.current = false;
-        };
-    });
-    return useCallback(isMounted, []);
-    function isMounted() {
-        return mounted.current;
-    }
-}
+import { useRef, useCallback } from 'react';
+import { useMount } from './use-mount.js';
+export function useIsMounted() {
+    const mounted = useRef(false);
+    useMount(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    });
+    return useCallback(isMounted, []);
+    function isMounted() {
+        return mounted.current;
+    }
+}
 //# sourceMappingURL=use-is-mounted.js.map

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

@@ -1 +1 @@
-export declare function useMountAsync(effect: (signal: AbortSignal) => Promise<void>): void;
+export declare function useMountAsync(effect: (signal: AbortSignal) => Promise<void>): void;

package/lib/use-mount-async.js

@@ -1,5 +1,5 @@
-import { useEffectAsync } from './use-effect-async.js';
-export function useMountAsync(effect) {
-    useEffectAsync(effect, []);
-}
+import { useEffectAsync } from './use-effect-async.js';
+export function useMountAsync(effect) {
+    useEffectAsync(effect, []);
+}
 //# sourceMappingURL=use-mount-async.js.map

package/lib/use-mount.d.ts

@@ -1,2 +1,2 @@
-import { EffectCallback } from 'react';
-export declare function useMount(effect: EffectCallback): void;
+import { EffectCallback } from 'react';
+export declare function useMount(effect: EffectCallback): void;

package/lib/use-mount.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-export function useMount(effect) {
-    useEffect(effect, []);
-}
+import { useEffect } from 'react';
+export function useMount(effect) {
+    useEffect(effect, []);
+}
 //# sourceMappingURL=use-mount.js.map

package/lib/use-multiple-selection.d.ts

@@ -1,9 +1,9 @@
-import { NonEmptyArray } from '@blackglory/prelude';
-import { IOptionState } from "./types.js";
-export declare function useMultipleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndexes?: number[]): {
-    selectedIndexes: number[];
-    optionStates: IOptionState[];
-    toggle: (index: number) => void;
-    select: (index: number) => void;
-    unselect: (index: number) => void;
-};
+import { NonEmptyArray } from '@blackglory/prelude';
+import { IOptionState } from "./types.js";
+export declare function useMultipleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndexes?: number[]): {
+    selectedIndexes: number[];
+    optionStates: IOptionState[];
+    toggle: (index: number) => void;
+    select: (index: number) => void;
+    unselect: (index: number) => void;
+};

package/lib/use-multiple-selection.js

@@ -1,50 +1,50 @@
-import { useState, useMemo, useCallback } from 'react';
-import { assert, toArray } from '@blackglory/prelude';
-import { useIIFE } from "./use-iife.js";
-export function useMultipleSelection(options, defaultSelectedIndexes = []) {
-    useIIFE(() => {
-        for (const index of defaultSelectedIndexes) {
-            assert(index >= 0 && index < options.length, 'The index of parameter defaultSelectedIndexes must be in the range of 0 to values.length');
-        }
-    }, [defaultSelectedIndexes]);
-    const [selectedIndexes, setSelectedIndexes] = useState(new Set(defaultSelectedIndexes));
-    return {
-        selectedIndexes: useMemo(() => toArray(selectedIndexes), [selectedIndexes]),
-        optionStates: useMemo(createOptionStates, [options, selectedIndexes]),
-        toggle: useCallback(toggle, [selectedIndexes]),
-        select: useCallback(select, []),
-        unselect: useCallback(unselect, [])
-    };
-    function createOptionStates() {
-        return options.map((_, index) => {
-            const selected = isSelected(index);
-            return { selected };
-        });
-    }
-    function isSelected(index) {
-        return selectedIndexes.has(index);
-    }
-    function toggle(index) {
-        if (isSelected(index)) {
-            unselect(index);
-        }
-        else {
-            select(index);
-        }
-    }
-    function select(index) {
-        setSelectedIndexes(selectedIndexes => {
-            const result = new Set(selectedIndexes);
-            result.add(index);
-            return result;
-        });
-    }
-    function unselect(index) {
-        setSelectedIndexes(selectedIndexes => {
-            const result = new Set(selectedIndexes);
-            result.delete(index);
-            return result;
-        });
-    }
-}
+import { useState, useMemo, useCallback } from 'react';
+import { assert, toArray } from '@blackglory/prelude';
+import { useIIFE } from "./use-iife.js";
+export function useMultipleSelection(options, defaultSelectedIndexes = []) {
+    useIIFE(() => {
+        for (const index of defaultSelectedIndexes) {
+            assert(index >= 0 && index < options.length, 'The index of parameter defaultSelectedIndexes must be in the range of 0 to values.length');
+        }
+    }, [defaultSelectedIndexes]);
+    const [selectedIndexes, setSelectedIndexes] = useState(new Set(defaultSelectedIndexes));
+    return {
+        selectedIndexes: useMemo(() => toArray(selectedIndexes), [selectedIndexes]),
+        optionStates: useMemo(createOptionStates, [options, selectedIndexes]),
+        toggle: useCallback(toggle, [selectedIndexes]),
+        select: useCallback(select, []),
+        unselect: useCallback(unselect, [])
+    };
+    function createOptionStates() {
+        return options.map((_, index) => {
+            const selected = isSelected(index);
+            return { selected };
+        });
+    }
+    function isSelected(index) {
+        return selectedIndexes.has(index);
+    }
+    function toggle(index) {
+        if (isSelected(index)) {
+            unselect(index);
+        }
+        else {
+            select(index);
+        }
+    }
+    function select(index) {
+        setSelectedIndexes(selectedIndexes => {
+            const result = new Set(selectedIndexes);
+            result.add(index);
+            return result;
+        });
+    }
+    function unselect(index) {
+        setSelectedIndexes(selectedIndexes => {
+            const result = new Set(selectedIndexes);
+            result.delete(index);
+            return result;
+        });
+    }
+}
 //# sourceMappingURL=use-multiple-selection.js.map

package/lib/use-render-counter.d.ts

@@ -1 +1 @@
-export declare function useRenderCounter(): number;
+export declare function useRenderCounter(): number;

package/lib/use-render-counter.js

@@ -1,7 +1,7 @@
-import { useRef } from 'react';
-export function useRenderCounter() {
-    const counter = useRef(0);
-    counter.current++;
-    return counter.current;
-}
+import { useRef } from 'react';
+export function useRenderCounter() {
+    const counter = useRef(0);
+    counter.current++;
+    return counter.current;
+}
 //# sourceMappingURL=use-render-counter.js.map

package/lib/use-resize-observer.d.ts

@@ -1,2 +1,2 @@
-import { RefObject, MutableRefObject } from 'react';
-export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
+import { RefObject, MutableRefObject } from 'react';
+export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;

package/lib/use-resize-observer.js

@@ -1,14 +1,14 @@
-import { useEffect } from 'react';
-import { isntNull } from '@blackglory/prelude';
-export function useResizeObserver(callback, refs) {
-    const deps = refs.map(x => x.current);
-    useEffect(() => {
-        const observer = new ResizeObserver(callback);
-        refs
-            .map(x => x.current)
-            .filter(isntNull)
-            .forEach(x => observer.observe(x));
-        return () => observer.disconnect();
-    }, deps);
-}
+import { useEffect } from 'react';
+import { isntNull } from '@blackglory/prelude';
+export function useResizeObserver(callback, refs) {
+    const deps = refs.map(x => x.current);
+    useEffect(() => {
+        const observer = new ResizeObserver(callback);
+        refs
+            .map(x => x.current)
+            .filter(isntNull)
+            .forEach(x => observer.observe(x));
+        return () => observer.disconnect();
+    }, deps);
+}
 //# sourceMappingURL=use-resize-observer.js.map

package/lib/use-single-selection.d.ts

@@ -1,7 +1,7 @@
-import { NonEmptyArray } from '@blackglory/prelude';
-import { IOptionState } from "./types.js";
-export declare function useSingleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndex: number): {
-    selectedIndex: number;
-    optionStates: IOptionState[];
-    select: (index: number) => void;
-};
+import { NonEmptyArray } from '@blackglory/prelude';
+import { IOptionState } from "./types.js";
+export declare function useSingleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndex: number): {
+    selectedIndex: number;
+    optionStates: IOptionState[];
+    select: (index: number) => void;
+};

package/lib/use-single-selection.js

@@ -1,23 +1,23 @@
-import { useState, useMemo, useCallback } from 'react';
-import { assert } from '@blackglory/prelude';
-import { useIIFE } from "./use-iife.js";
-export function useSingleSelection(options, defaultSelectedIndex) {
-    useIIFE(() => {
-        assert(defaultSelectedIndex >= 0 && defaultSelectedIndex < options.length, 'The parameter defaultSelectedIndex must be in the range of 0 to values.length');
-    }, [defaultSelectedIndex]);
-    const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
-    return {
-        selectedIndex,
-        optionStates: useMemo(createOptionStates, [options, selectedIndex]),
-        select: useCallback(select, [])
-    };
-    function createOptionStates() {
-        return options.map((_, index) => ({
-            selected: index === selectedIndex
-        }));
-    }
-    function select(index) {
-        setSelectedIndex(index);
-    }
-}
+import { useState, useMemo, useCallback } from 'react';
+import { assert } from '@blackglory/prelude';
+import { useIIFE } from "./use-iife.js";
+export function useSingleSelection(options, defaultSelectedIndex) {
+    useIIFE(() => {
+        assert(defaultSelectedIndex >= 0 && defaultSelectedIndex < options.length, 'The parameter defaultSelectedIndex must be in the range of 0 to values.length');
+    }, [defaultSelectedIndex]);
+    const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
+    return {
+        selectedIndex,
+        optionStates: useMemo(createOptionStates, [options, selectedIndex]),
+        select: useCallback(select, [])
+    };
+    function createOptionStates() {
+        return options.map((_, index) => ({
+            selected: index === selectedIndex
+        }));
+    }
+    function select(index) {
+        setSelectedIndex(index);
+    }
+}
 //# sourceMappingURL=use-single-selection.js.map

package/lib/use-state-cycle.d.ts

@@ -1,2 +1,2 @@
-import { NonEmptyArray } from '@blackglory/prelude';
-export declare function useStateCycle<T>(orderedStates: NonEmptyArray<T>, initialStateIndex?: number): [state: T, next: () => void];
+import { NonEmptyArray } from '@blackglory/prelude';
+export declare function useStateCycle<T>(orderedStates: NonEmptyArray<T>, initialStateIndex?: number): [state: T, next: () => void];

package/lib/use-state-cycle.js

@@ -1,16 +1,16 @@
-import { useState, useCallback } from 'react';
-export function useStateCycle(orderedStates, initialStateIndex = 0) {
-    const [index, setIndex] = useState(initialStateIndex);
-    return [orderedStates[index], useCallback(next, [orderedStates])];
-    function next() {
-        setIndex(index => {
-            if (index + 1 < orderedStates.length) {
-                return index + 1;
-            }
-            else {
-                return 0;
-            }
-        });
-    }
-}
+import { useState, useCallback } from 'react';
+export function useStateCycle(orderedStates, initialStateIndex = 0) {
+    const [index, setIndex] = useState(initialStateIndex);
+    return [orderedStates[index], useCallback(next, [orderedStates])];
+    function next() {
+        setIndex(index => {
+            if (index + 1 < orderedStates.length) {
+                return index + 1;
+            }
+            else {
+                return 0;
+            }
+        });
+    }
+}
 //# sourceMappingURL=use-state-cycle.js.map

package/lib/use-step.d.ts

@@ -1,2 +1,2 @@
-import { NonEmptyArray } from '@blackglory/prelude';
-export declare function useStep<T>(steps: NonEmptyArray<T>, initialStepIndex?: number): [currentStep: T, next: () => void, previous: () => void];
+import { NonEmptyArray } from '@blackglory/prelude';
+export declare function useStep<T>(steps: NonEmptyArray<T>, initialStepIndex?: number): [currentStep: T, next: () => void, previous: () => void];

package/lib/use-step.js

@@ -1,26 +1,26 @@
-import { useState, useCallback } from 'react';
-export function useStep(steps, initialStepIndex = 0) {
-    const [index, setIndex] = useState(initialStepIndex);
-    return [steps[index], useCallback(next, [steps]), useCallback(previous, [])];
-    function next() {
-        setIndex(index => {
-            if (index === steps.length - 1) {
-                return index;
-            }
-            else {
-                return index + 1;
-            }
-        });
-    }
-    function previous() {
-        setIndex(index => {
-            if (index === 0) {
-                return index;
-            }
-            else {
-                return index - 1;
-            }
-        });
-    }
-}
+import { useState, useCallback } from 'react';
+export function useStep(steps, initialStepIndex = 0) {
+    const [index, setIndex] = useState(initialStepIndex);
+    return [steps[index], useCallback(next, [steps]), useCallback(previous, [])];
+    function next() {
+        setIndex(index => {
+            if (index === steps.length - 1) {
+                return index;
+            }
+            else {
+                return index + 1;
+            }
+        });
+    }
+    function previous() {
+        setIndex(index => {
+            if (index === 0) {
+                return index;
+            }
+            else {
+                return index - 1;
+            }
+        });
+    }
+}
 //# sourceMappingURL=use-step.js.map

package/lib/use-toggle.d.ts

@@ -1 +1 @@
-export declare function useToggle(initialState?: boolean): [on: boolean, toggle: () => void];
+export declare function useToggle(initialState?: boolean): [on: boolean, toggle: () => void];

package/lib/use-toggle.js

@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react';
-export function useToggle(initialState = false) {
-    const [state, setState] = useState(initialState);
-    return [state, useCallback(toggle, [])];
-    function toggle() {
-        setState(state => !state);
-    }
-}
+import { useState, useCallback } from 'react';
+export function useToggle(initialState = false) {
+    const [state, setState] = useState(initialState);
+    return [state, useCallback(toggle, [])];
+    function toggle() {
+        setState(state => !state);
+    }
+}
 //# sourceMappingURL=use-toggle.js.map

package/lib/use-unmount.d.ts

@@ -1 +1 @@
-export declare function useUnmount(effect: () => void): void;
+export declare function useUnmount(effect: () => void): void;

package/lib/use-unmount.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-export function useUnmount(effect) {
-    useEffect(() => effect, []);
-}
+import { useEffect } from 'react';
+export function useUnmount(effect) {
+    useEffect(() => effect, []);
+}
 //# sourceMappingURL=use-unmount.js.map

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

@@ -1,2 +1,2 @@
-import { EffectCallback } from 'react';
-export declare function useUpdateEffect(effect: EffectCallback, deps?: React.DependencyList): void;
+import { EffectCallback } from 'react';
+export declare function useUpdateEffect(effect: EffectCallback, deps?: React.DependencyList): void;

package/lib/use-update-effect.js

@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
-import { useIsFirstRender } from './use-is-first-render.js';
-export function useUpdateEffect(effect, deps) {
-    const isFirstRender = useIsFirstRender();
-    useEffect(() => {
-        if (!isFirstRender()) {
-            return effect();
-        }
-    }, deps);
-}
+import { useEffect } from 'react';
+import { useIsFirstRender } from './use-is-first-render.js';
+export function useUpdateEffect(effect, deps) {
+    const isFirstRender = useIsFirstRender();
+    useEffect(() => {
+        if (!isFirstRender()) {
+            return effect();
+        }
+    }, deps);
+}
 //# sourceMappingURL=use-update-effect.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "",
   "keywords": [],
   "files": [

package/src/use-callback-async.ts

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo, DependencyList } from 'react'
+import { useLayoutEffect, useCallback, useMemo, DependencyList } from 'react'
 import { go } from '@blackglory/prelude'
 import { AbortController } from 'extra-abort'
 
@@ -9,7 +9,9 @@ export function useCallbackAsync<Args extends unknown[]>(
 , deps: DependencyList
 ): (...args: Args) => void {
   const controller = useMemo(() => new AbortController(), deps)
-  useEffect(() => () => controller.abort(abort), [controller])
+  useLayoutEffect(() => {
+    return () => controller.abort(abort)
+  }, [controller])
 
   return useCallback((...args: Args) => {
     go(async () => {
@@ -19,5 +21,5 @@ export function useCallbackAsync<Args extends unknown[]>(
         if (err !== abort) throw err
       }
     })
-  }, [callback, controller])
+  }, [controller])
 }