@react-hookz/web - npm Package Compare versions

Comparing version 10.1.1 to 11.0.0

CHANGELOG.md

@@ -0,1 +1,34 @@
+# [11.0.0](https://github.com/react-hookz/web/compare/v10.1.1...v11.0.0) (2021-09-28)
+
+
+### Bug Fixes
+
+* proper links in readme that don't break in firefox ([b406dc6](https://github.com/react-hookz/web/commit/b406dc69d0ad5a08d26ab85144d056b6916b18f7))
+
+
+### Features
+
+* improve `useConditionalEffect` and remove `useConditionalUpdateEffect` ([#345](https://github.com/react-hookz/web/issues/345)) ([4474cf7](https://github.com/react-hookz/web/commit/4474cf730f9e02599eb3c2674ac3304d9f33ec93))
+
+
+### BREAKING CHANGES
+
+* `useConditionalEffect` conditions and deps arguments now switched places.
+
+* feat(useConditionalEffect): added ability to wrap other effect hooks
+
+* feat: remove `useConditionalUpdateEffect`
+* `useConditionalUpdateEffect` removed in favor of
+composition with `useConditionalEffect`.
+
+Now you should simpy pass extra argument to achieve same functionality:
+`useConditionalEffect(()=>{}, undefined, [], truthyAndArrayPredicate,
+useUpdateEffect)`
+* Interface `IUseConditionalEffectPredicate` renamed to
+`IConditionsPredicate`
+
+* docs: cleanup, remove `useConditionalUpdateEffect` from readme
+
+Co-authored-by: Joe Duncko <[e-mail]>
+
 ## [10.1.1](https://github.com/react-hookz/web/compare/v10.1.0...v10.1.1) (2021-09-24)
@@ -2,0 +35,0 @@

cjs/index.d.ts

 export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
 export { useRafCallback } from './useRafCallback/useRafCallback';
 export { useThrottledCallback } from './useThrottledCallback/useThrottledCallback';
-export { useConditionalEffect, IUseConditionalEffectPredicate, } from './useConditionalEffect/useConditionalEffect';
-export { useConditionalUpdateEffect, IUseConditionalUpdateEffectPredicate, } from './useConditionalUpdateEffect/useConditionalUpdateEffect';
+export { useConditionalEffect, IConditionsPredicate, IConditionsList, } from './useConditionalEffect/useConditionalEffect';
 export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
@@ -40,1 +39,2 @@ export { useFirstMountState } from './useFirstMountState/useFirstMountState';
 export { truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
+export { IEffectCallback, IEffectHook } from './util/misc';

cjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.truthyOrArrayPredicate = exports.truthyAndArrayPredicate = exports.useEventListener = exports.useDocumentTitle = exports.useClickOutside = exports.useKeyboardEvent = exports.useMediaQuery = exports.useMeasure = exports.useResizeObserver = exports.useIntersectionObserver = exports.useAsyncAbortable = exports.useAsync = exports.useSessionStorageValue = exports.useLocalStorageValue = exports.useSyncedRef = exports.usePermission = exports.useNetworkState = exports.useValidator = exports.useThrottledState = exports.useToggle = exports.useSet = exports.useSafeState = exports.usePrevious = exports.useMediatedState = exports.useMap = exports.useDebouncedState = exports.useUpdateEffect = exports.useUnmountEffect = exports.useThrottledEffect = exports.useRerender = exports.useMountEffect = exports.useIsomorphicLayoutEffect = exports.useIsMounted = exports.useFirstMountState = exports.useDebouncedEffect = exports.useConditionalUpdateEffect = exports.useConditionalEffect = exports.useThrottledCallback = exports.useRafCallback = exports.useDebouncedCallback = void 0;
+exports.truthyOrArrayPredicate = exports.truthyAndArrayPredicate = exports.useEventListener = exports.useDocumentTitle = exports.useClickOutside = exports.useKeyboardEvent = exports.useMediaQuery = exports.useMeasure = exports.useResizeObserver = exports.useIntersectionObserver = exports.useAsyncAbortable = exports.useAsync = exports.useSessionStorageValue = exports.useLocalStorageValue = exports.useSyncedRef = exports.usePermission = exports.useNetworkState = exports.useValidator = exports.useThrottledState = exports.useToggle = exports.useSet = exports.useSafeState = exports.usePrevious = exports.useMediatedState = exports.useMap = exports.useDebouncedState = exports.useUpdateEffect = exports.useUnmountEffect = exports.useThrottledEffect = exports.useRerender = exports.useMountEffect = exports.useIsomorphicLayoutEffect = exports.useIsMounted = exports.useFirstMountState = exports.useDebouncedEffect = exports.useConditionalEffect = exports.useThrottledCallback = exports.useRafCallback = exports.useDebouncedCallback = void 0;
 // Callback
@@ -14,4 +14,2 @@ var useDebouncedCallback_1 = require("./useDebouncedCallback/useDebouncedCallback");
 Object.defineProperty(exports, "useConditionalEffect", { enumerable: true, get: function () { return useConditionalEffect_1.useConditionalEffect; } });
-var useConditionalUpdateEffect_1 = require("./useConditionalUpdateEffect/useConditionalUpdateEffect");
-Object.defineProperty(exports, "useConditionalUpdateEffect", { enumerable: true, get: function () { return useConditionalUpdateEffect_1.useConditionalUpdateEffect; } });
 var useDebouncedEffect_1 = require("./useDebouncedEffect/useDebouncedEffect");
@@ -18,0 +16,0 @@ Object.defineProperty(exports, "useDebouncedEffect", { enumerable: true, get: function () { return useDebouncedEffect_1.useDebouncedEffect; } });

cjs/useConditionalEffect/useConditionalEffect.d.ts

@@ -1,14 +0,20 @@
-import { DependencyList, EffectCallback } from 'react';
-export declare type IUseConditionalEffectPredicate<Cond extends ReadonlyArray<any>> = (conditions: Cond) => boolean;
+import { DependencyList } from 'react';
+import { IEffectCallback, IEffectHook } from '..';
+export declare type IConditionsList = ReadonlyArray<any>;
+export declare type IConditionsPredicate<Cond extends IConditionsList = IConditionsList> = (conditions: Cond) => boolean;
 /**
  * Like `useEffect` but callback invoked only if conditions match predicate.
  *
- * @param callback Callback to invoke
- * @param conditions Conditions array
- * @param deps Dependencies list like for `useEffect`. If set - effect will be
+ * @param callback Function that will be passed to underlying effect hook.
+ * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
  * triggered when deps changed AND conditions are satisfying predicate.
+ * @param conditions Conditions array.
  * @param predicate Predicate that defines whether conditions satisfying certain
  * provision. By default, it is all-truthy provision, meaning that all
  * conditions should be truthy.
+ * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
+ * signature, meaning that callback should be placed as first argument and dependencies list
+ * as second.
+ * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
  */
-export declare function useConditionalEffect<T extends ReadonlyArray<unknown>>(callback: EffectCallback, conditions: T, deps?: DependencyList, predicate?: IUseConditionalEffectPredicate<T>): void;
+export declare function useConditionalEffect<Cond extends IConditionsList, Callback extends IEffectCallback = IEffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, conditions: Cond, predicate?: IConditionsPredicate<Cond>, effectHook?: IEffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

cjs/useConditionalEffect/useConditionalEffect.js

 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useConditionalEffect = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var react_1 = require("react");
@@ -9,20 +19,30 @@ var __1 = require("..");
  *
- * @param callback Callback to invoke
- * @param conditions Conditions array
- * @param deps Dependencies list like for `useEffect`. If set - effect will be
+ * @param callback Function that will be passed to underlying effect hook.
+ * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
  * triggered when deps changed AND conditions are satisfying predicate.
+ * @param conditions Conditions array.
  * @param predicate Predicate that defines whether conditions satisfying certain
  * provision. By default, it is all-truthy provision, meaning that all
  * conditions should be truthy.
+ * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
+ * signature, meaning that callback should be placed as first argument and dependencies list
+ * as second.
+ * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
  */
-function useConditionalEffect(callback, conditions, deps, predicate) {
+function useConditionalEffect(callback, deps, conditions, predicate, effectHook) {
     if (predicate === void 0) { predicate = __1.truthyAndArrayPredicate; }
-    // eslint-disable-next-line consistent-return
-    (0, react_1.useEffect)(function () {
-        if (predicate(conditions)) {
-            return callback();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
+    if (effectHook === void 0) { effectHook = react_1.useEffect; }
+    var effectHookRestArgs = [];
+    for (var _i = 5; _i < arguments.length; _i++) {
+        effectHookRestArgs[_i - 5] = arguments[_i];
+    }
+    effectHook.apply(void 0, __spreadArray([
+        // eslint-disable-next-line consistent-return
+        (function () {
+            if (predicate(conditions)) {
+                return callback();
+            }
+        }),
+        deps], effectHookRestArgs, false));
 }
 exports.useConditionalEffect = useConditionalEffect;

cjs/useStorageValue/useStorageValue.js

@@ -71,3 +71,3 @@ "use strict";
         methods.current.storeVal(defaultValue);
-    }, [prevState !== state, state === defaultValue && defaultValue !== null && storeDefaultValue]);
+    }, undefined, [prevState !== state, state === defaultValue && defaultValue !== null && storeDefaultValue]);
     // refetch value when key changed
@@ -74,0 +74,0 @@ (0, __1.useUpdateEffect)(function () {

cjs/util/const.d.ts

@@ -0,4 +1,5 @@
+import { IConditionsPredicate } from '..';
 export declare const noop: () => void;
 export declare const isBrowser: boolean;
-export declare function truthyAndArrayPredicate(conditions: ReadonlyArray<unknown>): boolean;
-export declare function truthyOrArrayPredicate(conditions: ReadonlyArray<unknown>): boolean;
+export declare const truthyAndArrayPredicate: IConditionsPredicate;
+export declare const truthyOrArrayPredicate: IConditionsPredicate;

cjs/util/const.js

@@ -9,9 +9,9 @@ "use strict";
     typeof document !== 'undefined';
-function truthyAndArrayPredicate(conditions) {
+var truthyAndArrayPredicate = function (conditions) {
     return conditions.every(function (i) { return Boolean(i); });
-}
+};
 exports.truthyAndArrayPredicate = truthyAndArrayPredicate;
-function truthyOrArrayPredicate(conditions) {
+var truthyOrArrayPredicate = function (conditions) {
     return conditions.some(function (i) { return Boolean(i); });
-}
+};
 exports.truthyOrArrayPredicate = truthyOrArrayPredicate;

cjs/util/misc.d.ts

@@ -0,1 +1,2 @@
+import { DependencyList } from 'react';
 export declare function on<T extends EventTarget>(obj: T | null, ...args: Parameters<T['addEventListener']> | [string, EventListenerOrEventListenerObject | CallableFunction, ...any]): void;
@@ -6,1 +7,3 @@ export declare function off<T extends EventTarget>(obj: T | null, ...args: Parameters<T['removeEventListener']> | [string, EventListenerOrEventListenerObject | CallableFunction, ...any]): void;
 export declare const yieldFalse: () => false;
+export declare type IEffectCallback = (...args: any[]) => any;
+export declare type IEffectHook<Callback extends IEffectCallback = IEffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, RestArgs extends any[] = any[]> = ((...args: [Callback, Deps, ...RestArgs]) => void) | ((...args: [Callback, Deps]) => void);

esm/index.d.ts

 export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
 export { useRafCallback } from './useRafCallback/useRafCallback';
 export { useThrottledCallback } from './useThrottledCallback/useThrottledCallback';
-export { useConditionalEffect, IUseConditionalEffectPredicate, } from './useConditionalEffect/useConditionalEffect';
-export { useConditionalUpdateEffect, IUseConditionalUpdateEffectPredicate, } from './useConditionalUpdateEffect/useConditionalUpdateEffect';
+export { useConditionalEffect, IConditionsPredicate, IConditionsList, } from './useConditionalEffect/useConditionalEffect';
 export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
@@ -40,1 +39,2 @@ export { useFirstMountState } from './useFirstMountState/useFirstMountState';
 export { truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
+export { IEffectCallback, IEffectHook } from './util/misc';

esm/index.js

@@ -7,3 +7,2 @@ // Callback
 export { useConditionalEffect, } from "./useConditionalEffect/useConditionalEffect.js";
-export { useConditionalUpdateEffect, } from "./useConditionalUpdateEffect/useConditionalUpdateEffect.js";
 export { useDebouncedEffect } from "./useDebouncedEffect/useDebouncedEffect.js";
@@ -10,0 +9,0 @@ export { useFirstMountState } from "./useFirstMountState/useFirstMountState.js";

esm/useConditionalEffect/useConditionalEffect.d.ts

@@ -1,14 +0,20 @@
-import { DependencyList, EffectCallback } from 'react';
-export declare type IUseConditionalEffectPredicate<Cond extends ReadonlyArray<any>> = (conditions: Cond) => boolean;
+import { DependencyList } from 'react';
+import { IEffectCallback, IEffectHook } from '..';
+export declare type IConditionsList = ReadonlyArray<any>;
+export declare type IConditionsPredicate<Cond extends IConditionsList = IConditionsList> = (conditions: Cond) => boolean;
 /**
  * Like `useEffect` but callback invoked only if conditions match predicate.
  *
- * @param callback Callback to invoke
- * @param conditions Conditions array
- * @param deps Dependencies list like for `useEffect`. If set - effect will be
+ * @param callback Function that will be passed to underlying effect hook.
+ * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
  * triggered when deps changed AND conditions are satisfying predicate.
+ * @param conditions Conditions array.
  * @param predicate Predicate that defines whether conditions satisfying certain
  * provision. By default, it is all-truthy provision, meaning that all
  * conditions should be truthy.
+ * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
+ * signature, meaning that callback should be placed as first argument and dependencies list
+ * as second.
+ * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
  */
-export declare function useConditionalEffect<T extends ReadonlyArray<unknown>>(callback: EffectCallback, conditions: T, deps?: DependencyList, predicate?: IUseConditionalEffectPredicate<T>): void;
+export declare function useConditionalEffect<Cond extends IConditionsList, Callback extends IEffectCallback = IEffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, conditions: Cond, predicate?: IConditionsPredicate<Cond>, effectHook?: IEffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

esm/useConditionalEffect/useConditionalEffect.js

@@ -0,1 +1,11 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
@@ -6,19 +16,29 @@ import { truthyAndArrayPredicate } from '..';
  *
- * @param callback Callback to invoke
- * @param conditions Conditions array
- * @param deps Dependencies list like for `useEffect`. If set - effect will be
+ * @param callback Function that will be passed to underlying effect hook.
+ * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
  * triggered when deps changed AND conditions are satisfying predicate.
+ * @param conditions Conditions array.
  * @param predicate Predicate that defines whether conditions satisfying certain
  * provision. By default, it is all-truthy provision, meaning that all
  * conditions should be truthy.
+ * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
+ * signature, meaning that callback should be placed as first argument and dependencies list
+ * as second.
+ * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
  */
-export function useConditionalEffect(callback, conditions, deps, predicate) {
+export function useConditionalEffect(callback, deps, conditions, predicate, effectHook) {
     if (predicate === void 0) { predicate = truthyAndArrayPredicate; }
-    // eslint-disable-next-line consistent-return
-    useEffect(function () {
-        if (predicate(conditions)) {
-            return callback();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
+    if (effectHook === void 0) { effectHook = useEffect; }
+    var effectHookRestArgs = [];
+    for (var _i = 5; _i < arguments.length; _i++) {
+        effectHookRestArgs[_i - 5] = arguments[_i];
+    }
+    effectHook.apply(void 0, __spreadArray([
+        // eslint-disable-next-line consistent-return
+        (function () {
+            if (predicate(conditions)) {
+                return callback();
+            }
+        }),
+        deps], effectHookRestArgs, false));
 }

esm/useStorageValue/useStorageValue.js

 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useCallback, useEffect } from 'react';
-import { useSafeState, useConditionalEffect, useUpdateEffect, useSyncedRef, useFirstMountState, usePrevious, useMountEffect, } from '..';
+import { useConditionalEffect, useFirstMountState, useMountEffect, usePrevious, useSafeState, useSyncedRef, useUpdateEffect, } from '..';
 import { resolveHookState } from "../util/resolveHookState.js";
@@ -68,3 +68,3 @@ import { isBrowser } from "../util/const.js";
         methods.current.storeVal(defaultValue);
-    }, [prevState !== state, state === defaultValue && defaultValue !== null && storeDefaultValue]);
+    }, undefined, [prevState !== state, state === defaultValue && defaultValue !== null && storeDefaultValue]);
     // refetch value when key changed
@@ -71,0 +71,0 @@ useUpdateEffect(function () {

esm/util/const.d.ts

@@ -0,4 +1,5 @@
+import { IConditionsPredicate } from '..';
 export declare const noop: () => void;
 export declare const isBrowser: boolean;
-export declare function truthyAndArrayPredicate(conditions: ReadonlyArray<unknown>): boolean;
-export declare function truthyOrArrayPredicate(conditions: ReadonlyArray<unknown>): boolean;
+export declare const truthyAndArrayPredicate: IConditionsPredicate;
+export declare const truthyOrArrayPredicate: IConditionsPredicate;

esm/util/const.js

@@ -5,7 +5,7 @@ export var noop = function () { };
     typeof document !== 'undefined';
-export function truthyAndArrayPredicate(conditions) {
+export var truthyAndArrayPredicate = function (conditions) {
     return conditions.every(function (i) { return Boolean(i); });
-}
-export function truthyOrArrayPredicate(conditions) {
+};
+export var truthyOrArrayPredicate = function (conditions) {
     return conditions.some(function (i) { return Boolean(i); });
-}
+};

esm/util/misc.d.ts

@@ -0,1 +1,2 @@
+import { DependencyList } from 'react';
 export declare function on<T extends EventTarget>(obj: T | null, ...args: Parameters<T['addEventListener']> | [string, EventListenerOrEventListenerObject | CallableFunction, ...any]): void;
@@ -6,1 +7,3 @@ export declare function off<T extends EventTarget>(obj: T | null, ...args: Parameters<T['removeEventListener']> | [string, EventListenerOrEventListenerObject | CallableFunction, ...any]): void;
 export declare const yieldFalse: () => false;
+export declare type IEffectCallback = (...args: any[]) => any;
+export declare type IEffectHook<Callback extends IEffectCallback = IEffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, RestArgs extends any[] = any[]> = ((...args: [Callback, Deps, ...RestArgs]) => void) | ((...args: [Callback, Deps]) => void);

esnext/index.d.ts

 export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
 export { useRafCallback } from './useRafCallback/useRafCallback';
 export { useThrottledCallback } from './useThrottledCallback/useThrottledCallback';
-export { useConditionalEffect, IUseConditionalEffectPredicate, } from './useConditionalEffect/useConditionalEffect';
-export { useConditionalUpdateEffect, IUseConditionalUpdateEffectPredicate, } from './useConditionalUpdateEffect/useConditionalUpdateEffect';
+export { useConditionalEffect, IConditionsPredicate, IConditionsList, } from './useConditionalEffect/useConditionalEffect';
 export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
@@ -40,1 +39,2 @@ export { useFirstMountState } from './useFirstMountState/useFirstMountState';
 export { truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
+export { IEffectCallback, IEffectHook } from './util/misc';

esnext/index.js

@@ -7,3 +7,2 @@ // Callback
 export { useConditionalEffect, } from "./useConditionalEffect/useConditionalEffect.js";
-export { useConditionalUpdateEffect, } from "./useConditionalUpdateEffect/useConditionalUpdateEffect.js";
 export { useDebouncedEffect } from "./useDebouncedEffect/useDebouncedEffect.js";
@@ -10,0 +9,0 @@ export { useFirstMountState } from "./useFirstMountState/useFirstMountState.js";

esnext/useConditionalEffect/useConditionalEffect.d.ts

@@ -1,14 +0,20 @@
-import { DependencyList, EffectCallback } from 'react';
-export declare type IUseConditionalEffectPredicate<Cond extends ReadonlyArray<any>> = (conditions: Cond) => boolean;
+import { DependencyList } from 'react';
+import { IEffectCallback, IEffectHook } from '..';
+export declare type IConditionsList = ReadonlyArray<any>;
+export declare type IConditionsPredicate<Cond extends IConditionsList = IConditionsList> = (conditions: Cond) => boolean;
 /**
  * Like `useEffect` but callback invoked only if conditions match predicate.
  *
- * @param callback Callback to invoke
- * @param conditions Conditions array
- * @param deps Dependencies list like for `useEffect`. If set - effect will be
+ * @param callback Function that will be passed to underlying effect hook.
+ * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
  * triggered when deps changed AND conditions are satisfying predicate.
+ * @param conditions Conditions array.
  * @param predicate Predicate that defines whether conditions satisfying certain
  * provision. By default, it is all-truthy provision, meaning that all
  * conditions should be truthy.
+ * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
+ * signature, meaning that callback should be placed as first argument and dependencies list
+ * as second.
+ * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
  */
-export declare function useConditionalEffect<T extends ReadonlyArray<unknown>>(callback: EffectCallback, conditions: T, deps?: DependencyList, predicate?: IUseConditionalEffectPredicate<T>): void;
+export declare function useConditionalEffect<Cond extends IConditionsList, Callback extends IEffectCallback = IEffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, conditions: Cond, predicate?: IConditionsPredicate<Cond>, effectHook?: IEffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

esnext/useConditionalEffect/useConditionalEffect.js

@@ -0,1 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
@@ -6,18 +7,22 @@ import { truthyAndArrayPredicate } from '..';
  *
- * @param callback Callback to invoke
- * @param conditions Conditions array
- * @param deps Dependencies list like for `useEffect`. If set - effect will be
+ * @param callback Function that will be passed to underlying effect hook.
+ * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
  * triggered when deps changed AND conditions are satisfying predicate.
+ * @param conditions Conditions array.
  * @param predicate Predicate that defines whether conditions satisfying certain
  * provision. By default, it is all-truthy provision, meaning that all
  * conditions should be truthy.
+ * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
+ * signature, meaning that callback should be placed as first argument and dependencies list
+ * as second.
+ * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
  */
-export function useConditionalEffect(callback, conditions, deps, predicate = truthyAndArrayPredicate) {
+export function useConditionalEffect(callback, deps, conditions, predicate = truthyAndArrayPredicate, effectHook = useEffect, ...effectHookRestArgs) {
+    effectHook(
     // eslint-disable-next-line consistent-return
-    useEffect(() => {
+    (() => {
         if (predicate(conditions)) {
             return callback();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
+    }), deps, ...effectHookRestArgs);
 }

esnext/useStorageValue/useStorageValue.js

 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useCallback, useEffect } from 'react';
-import { useSafeState, useConditionalEffect, useUpdateEffect, useSyncedRef, useFirstMountState, usePrevious, useMountEffect, } from '..';
+import { useConditionalEffect, useFirstMountState, useMountEffect, usePrevious, useSafeState, useSyncedRef, useUpdateEffect, } from '..';
 import { resolveHookState } from "../util/resolveHookState.js";
@@ -66,3 +66,3 @@ import { isBrowser } from "../util/const.js";
         methods.current.storeVal(defaultValue);
-    }, [prevState !== state, state === defaultValue && defaultValue !== null && storeDefaultValue]);
+    }, undefined, [prevState !== state, state === defaultValue && defaultValue !== null && storeDefaultValue]);
     // refetch value when key changed
@@ -69,0 +69,0 @@ useUpdateEffect(() => {

esnext/util/const.d.ts

@@ -0,4 +1,5 @@
+import { IConditionsPredicate } from '..';
 export declare const noop: () => void;
 export declare const isBrowser: boolean;
-export declare function truthyAndArrayPredicate(conditions: ReadonlyArray<unknown>): boolean;
-export declare function truthyOrArrayPredicate(conditions: ReadonlyArray<unknown>): boolean;
+export declare const truthyAndArrayPredicate: IConditionsPredicate;
+export declare const truthyOrArrayPredicate: IConditionsPredicate;

esnext/util/const.js

@@ -5,7 +5,3 @@ export const noop = () => { };
     typeof document !== 'undefined';
-export function truthyAndArrayPredicate(conditions) {
-    return conditions.every((i) => Boolean(i));
-}
-export function truthyOrArrayPredicate(conditions) {
-    return conditions.some((i) => Boolean(i));
-}
+export const truthyAndArrayPredicate = (conditions) => conditions.every((i) => Boolean(i));
+export const truthyOrArrayPredicate = (conditions) => conditions.some((i) => Boolean(i));

esnext/util/misc.d.ts

@@ -0,1 +1,2 @@
+import { DependencyList } from 'react';
 export declare function on<T extends EventTarget>(obj: T | null, ...args: Parameters<T['addEventListener']> | [string, EventListenerOrEventListenerObject | CallableFunction, ...any]): void;
@@ -6,1 +7,3 @@ export declare function off<T extends EventTarget>(obj: T | null, ...args: Parameters<T['removeEventListener']> | [string, EventListenerOrEventListenerObject | CallableFunction, ...any]): void;
 export declare const yieldFalse: () => false;
+export declare type IEffectCallback = (...args: any[]) => any;
+export declare type IEffectHook<Callback extends IEffectCallback = IEffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, RestArgs extends any[] = any[]> = ((...args: [Callback, Deps, ...RestArgs]) => void) | ((...args: [Callback, Deps]) => void);

package.json

 {
   "name": "@react-hookz/web",
-  "version": "10.1.1",
+  "version": "11.0.0",
   "description": "React hooks done right, for browser and SSR.",
@@ -102,8 +102,8 @@ "keywords": [
     "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
+    "@typescript-eslint/eslint-plugin": "^4.32.0",
+    "@typescript-eslint/parser": "^4.32.0",
     "babel-loader": "^8.2.2",
     "commitizen": "^4.2.4",
     "commitlint": "^13.1.0",
-    "concurrently": "^6.2.1",
+    "concurrently": "^6.2.2",
     "eslint": "^7.32.0",
@@ -121,3 +121,3 @@ "eslint-config-airbnb": "^18.2.1",
     "husky": "^7.0.2",
-    "jest": "^27.2.1",
+    "jest": "^27.2.2",
     "jest-github-actions-reporter": "^1.0.3",
@@ -124,0 +124,0 @@ "js-cookie": "^3.0.1",

README.md

@@ -61,3 +61,4 @@ <div align="center">
 
-Coming from `react-use`? Check out our [migration guide](https://react-hookz.github.io/web/?path=/docs/migrating-from-react-use).
+Coming from `react-use`? Check out
+our [migration guide](https://react-hookz.github.io/web/?path=/docs/migrating-from-react-use--page).
 
@@ -68,7 +69,7 @@ ## Hooks list
 
-  - [**`useDebouncedCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usedebouncedcallback)
+  - [**`useDebouncedCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usedebouncedcallback--example)
     — Makes passed function debounced, otherwise acts like `useCallback`.
-  - [**`useRafCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-userafcallback)
+  - [**`useRafCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-userafcallback--example)
     — Makes passed function to be called within next animation frame.
-  - [**`useThrottledCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usethrottledcallback)
+  - [**`useThrottledCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usethrottledcallback--example)
     — Makes passed function throttled, otherwise acts like `useCallback`.
@@ -78,23 +79,21 @@
 
-  - [**`useConditionalEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useconditionaleffect)
+  - [**`useConditionalEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useconditionaleffect--example)
     — Like `useEffect` but callback invoked only if conditions match predicate.
-  - [**`useConditionalUpdateEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useconditionalupdateeffect)
-    — Like `useUpdateEffect` but callback invoked only if conditions match predicate.
-  - [**`useDebouncedEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usedebouncedeffect)
+  - [**`useDebouncedEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usedebouncedeffect--example)
     — Like `useEffect`, but passed function is debounced.
-  - [**`useFirstMountState`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usefirstmountstate)
+  - [**`useFirstMountState`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usefirstmountstate--example)
     — Return boolean that is `true` only on first render.
-  - [**`useIsMounted`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useismounted)
+  - [**`useIsMounted`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useismounted--example)
     — Returns function that yields current mount state.
-  - [**`useIsomorphicLayoutEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useisomorphiclayouteffect)
+  - [**`useIsomorphicLayoutEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useisomorphiclayouteffect--page)
     — `useLayoutEffect` for browser with fallback to `useEffect` for SSR.
-  - [**`useMountEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usemounteffect)
+  - [**`useMountEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usemounteffect--example)
     — Run effect only when component first-mounted.
-  - [**`useRerender`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usererender)
+  - [**`useRerender`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usererender--example)
     — Return callback that re-renders component.
-  - [**`useThrottledEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usethrottledeffect)
+  - [**`useThrottledEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usethrottledeffect--example)
     — Like `useEffect`, but passed function is throttled.
-  - [**`useUnmountEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useunmounteffect)
+  - [**`useUnmountEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useunmounteffect--example)
     — Run effect only when component unmounted.
-  - [**`useUpdateEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useupdateeffect)
+  - [**`useUpdateEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-useupdateeffect--example)
     — Effect hook that ignores the first render (not invoked on mount).
@@ -104,19 +103,19 @@
 
-  - [**`useDebouncedState`**](https://react-hookz.github.io/web/?path=/docs/state-usedebouncedstate)
+  - [**`useDebouncedState`**](https://react-hookz.github.io/web/?path=/docs/state-usedebouncedstate--example)
     — Lise `useSafeState` but its state setter is debounced.
-  - [**`useMap`**](https://react-hookz.github.io/web/?path=/docs/state-usemap)
+  - [**`useMap`**](https://react-hookz.github.io/web/?path=/docs/state-usemap--example)
     — Tracks the state of a `Map`.
-  - [**`useMediatedState`**](https://react-hookz.github.io/web/?path=/docs/state-usemediatedstate)
+  - [**`useMediatedState`**](https://react-hookz.github.io/web/?path=/docs/state-usemediatedstate--example)
     — Like `useState`, but every value set is passed through a mediator function.
-  - [**`usePrevious`**](https://react-hookz.github.io/web/?path=/docs/state-useprevious)
+  - [**`usePrevious`**](https://react-hookz.github.io/web/?path=/docs/state-useprevious--example)
     — Returns the value passed to the hook on previous render.
-  - [**`useSafeState`**](https://react-hookz.github.io/web/?path=/docs/state-usesafestate)
+  - [**`useSafeState`**](https://react-hookz.github.io/web/?path=/docs/state-usesafestate--page)
     — Like `useState`, but its state setter is guarded against sets on unmounted component.
-  - [**`useSet`**](https://react-hookz.github.io/web/?path=/docs/state-useset)
+  - [**`useSet`**](https://react-hookz.github.io/web/?path=/docs/state-useset--example)
     — Tracks the state of a `Set`.
-  - [**`useToggle`**](https://react-hookz.github.io/web/?path=/docs/state-usetoggle)
+  - [**`useToggle`**](https://react-hookz.github.io/web/?path=/docs/state-usetoggle--example)
     — Like `useState`, but can only become `true` or `false`.
-  - [**`useThrottledState`**](https://react-hookz.github.io/web/?path=/docs/state-usethrottledstate)
+  - [**`useThrottledState`**](https://react-hookz.github.io/web/?path=/docs/state-usethrottledstate--example)
     — Like `useSafeState` but its state setter is throttled.
-  - [**`useValidator`**](https://react-hookz.github.io/web/?path=/docs/state-usevalidator)
+  - [**`useValidator`**](https://react-hookz.github.io/web/?path=/docs/state-usevalidator--example)
     — Performs validation when any of provided dependencies has changed.
@@ -126,5 +125,5 @@
 
-  - [**`useNetworkState`**](https://react-hookz.github.io/web/?path=/docs/navigator-usenetwork)
+  - [**`useNetworkState`**](https://react-hookz.github.io/web/?path=/docs/navigator-usenetwork--example)
     — Tracks the state of browser's network connection.
-  - [**`usePermission`**](https://react-hookz.github.io/web/?path=/docs/navigator-usepermission)
+  - [**`usePermission`**](https://react-hookz.github.io/web/?path=/docs/navigator-usepermission--example)
     — Tracks a permission state.
@@ -134,3 +133,3 @@
 
-  - [**`useSyncedRef`**](https://react-hookz.github.io/web/?path=/docs/miscellaneous-usesyncedref)
+  - [**`useSyncedRef`**](https://react-hookz.github.io/web/?path=/docs/miscellaneous-usesyncedref--example)
     — Like `useRef`, but it returns immutable ref that contains actual value.
@@ -140,11 +139,12 @@
 
-  - [**`useAsync`**](https://react-hookz.github.io/web/?path=/docs/side-effect-useasync)
+  - [**`useAsync`**](https://react-hookz.github.io/web/?path=/docs/side-effect-useasync--example)
     — Executes provided async function and tracks its result and error.
-  - [**`useAsyncAbortable`**](https://react-hookz.github.io/web/?path=/docs/side-effect-useasyncabortable)
-    — Like `useAsync`, but also provides `AbortSignal` as first function argument to async function.
-  - [**`useCookieValue`**](https://react-hookz.github.io/web/?path=/docs/side-effect-usecookievalue)
+  - [**`useAsyncAbortable`**](https://react-hookz.github.io/web/?path=/docs/side-effect-useasyncabortable--example)
+    — Like `useAsync`, but also provides `AbortSignal` as first function argument to async
+    function.
+  - [**`useCookieValue`**](https://react-hookz.github.io/web/?path=/docs/side-effect-usecookievalue--example)
     — Manages a single cookie.
-  - [**`useLocalStorageValue`**](https://react-hookz.github.io/web/?path=/docs/side-effect-uselocalstoragevalue)
+  - [**`useLocalStorageValue`**](https://react-hookz.github.io/web/?path=/docs/side-effect-uselocalstoragevalue--example)
     — Manages a single LocalStorage key.
-  - [**`useSessionStorageValue`**](https://react-hookz.github.io/web/?path=/docs/side-effect-usesessionstoragevalue)
+  - [**`useSessionStorageValue`**](https://react-hookz.github.io/web/?path=/docs/side-effect-usesessionstoragevalue--example)
     — Manages a single SessionStorage key.
@@ -154,9 +154,10 @@
 
-  - [**`useIntersectionObserver`**](https://react-hookz.github.io/web/?path=/docs/sensor-useintersectionobserver)
-    — Observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
-  - [**`useMeasure`**](https://react-hookz.github.io/web/?path=/docs/sensor-usemeasure)
+  - [**`useIntersectionObserver`**](https://react-hookz.github.io/web/?path=/docs/sensor-useintersectionobserver--example)
+    — Observe changes in the intersection of a target element with an ancestor element or with a
+    top-level document's viewport.
+  - [**`useMeasure`**](https://react-hookz.github.io/web/?path=/docs/sensor-usemeasure--example)
     — Uses ResizeObserver to track element dimensions and re-render component when they change.
-  - [**`useMediaQuery`**](https://react-hookz.github.io/web/?path=/docs/sensor-usemediaquery)
+  - [**`useMediaQuery`**](https://react-hookz.github.io/web/?path=/docs/sensor-usemediaquery--example)
     — Tracks the state of CSS media query.
-  - [**`useResizeObserver`**](https://react-hookz.github.io/web/?path=/docs/sensor-useresizeobserver)
+  - [**`useResizeObserver`**](https://react-hookz.github.io/web/?path=/docs/sensor-useresizeobserver--example)
     — Invokes a callback whenever ResizeObserver detects a change to target's size.
@@ -166,9 +167,9 @@
 
-  - [**`useClickOutside`**](https://react-hookz.github.io/web/?path=/docs/dom-useclickoutside)
+  - [**`useClickOutside`**](https://react-hookz.github.io/web/?path=/docs/dom-useclickoutside--example)
     — Triggers callback when user clicks outside the target element.
-  - [**`useDocumentTitle`**](https://react-hookz.github.io/web/?path=/docs/dom-usedocumenttitle)
+  - [**`useDocumentTitle`**](https://react-hookz.github.io/web/?path=/docs/dom-usedocumenttitle--example)
     — Sets title of the page.
-  - [**`useEventListener`**](https://react-hookz.github.io/web/?path=/docs/dom-useeventlistener)
+  - [**`useEventListener`**](https://react-hookz.github.io/web/?path=/docs/dom-useeventlistener--example)
     — Subscribes an event listener to the target, and automatically unsubscribes it on unmount.
-  - [**`useKeyboardEvent`**](https://react-hookz.github.io/web/?path=/docs/dom-usekeyboardevent)
+  - [**`useKeyboardEvent`**](https://react-hookz.github.io/web/?path=/docs/dom-usekeyboardevent--example)
     — Executes callback when keyboard event occurred on target.

No alert changes

Improved metrics

Total package byte prevSize

346632

increased by0.2%

Number of lines in readme file

167

increased by0.6%

Worsened metrics

Number of package files

262

decreased by-2.24%

Lines of code

7025

decreased by-0.54%

No dependency changes