@react-hookz/web - npm Package Compare versions

Comparing version 20.0.1 to 20.0.2

cjs/useClickOutside/useClickOutside.d.ts

 import { MutableRefObject, RefObject } from 'react';
 /**
- * Triggers callback when user clicks outside the target element.
+ * Triggers a callback when the user clicks outside a target element.
  *
- * @param ref React ref object with target HTML element.
- * @param callback Callback that will be triggered during the click.
- * @param events Events list that will be used as triggers for outside click.
- * Default: 'mousedown', 'touchstart'
+ * @param ref React ref object containing the target HTML element.
+ * @param callback Callback invoked when the user clicks outside the target element.
+ * @param events List of events that will be used as triggers for the outside click. Default:
+ * 'mousedown', 'touchstart'
  */
 export declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T> | MutableRefObject<T>, callback: EventListener, events?: string[]): void;

cjs/useClickOutside/useClickOutside.js

@@ -18,8 +18,8 @@ "use strict";
 /**
- * Triggers callback when user clicks outside the target element.
+ * Triggers a callback when the user clicks outside a target element.
  *
- * @param ref React ref object with target HTML element.
- * @param callback Callback that will be triggered during the click.
- * @param events Events list that will be used as triggers for outside click.
- * Default: 'mousedown', 'touchstart'
+ * @param ref React ref object containing the target HTML element.
+ * @param callback Callback invoked when the user clicks outside the target element.
+ * @param events List of events that will be used as triggers for the outside click. Default:
+ * 'mousedown', 'touchstart'
  */
@@ -26,0 +26,0 @@ function useClickOutside(ref, callback, events) {

cjs/useEventListener/useEventListener.d.ts

 import { RefObject } from 'react';
 /**
- *  Subscribes an event listener to the target, and automatically unsubscribes
- *  it on unmount.
+ *  An HTML element or ref object containing an HTML element.
  *
- * @param target Element ref object or element itself.
- * @param params Parameters specific for target's `addEventListener`. Commonly,
- * it is `[eventName, listener, options]`.
+ * @param target An HTML element or ref object containing an HTML element.
+ * @param params Parameters specific to the target element's `addEventListener` method. Commonly
+ * something like `[eventName, listener, options]`.
  */
 export declare function useEventListener<T extends EventTarget>(target: RefObject<T> | T | null, ...params: Parameters<T['addEventListener']> | [string, EventListenerOrEventListenerObject | ((...args: any[]) => any), ...any]): void;

cjs/useEventListener/useEventListener.js

@@ -19,8 +19,7 @@ "use strict";
 /**
- *  Subscribes an event listener to the target, and automatically unsubscribes
- *  it on unmount.
+ *  An HTML element or ref object containing an HTML element.
  *
- * @param target Element ref object or element itself.
- * @param params Parameters specific for target's `addEventListener`. Commonly,
- * it is `[eventName, listener, options]`.
+ * @param target An HTML element or ref object containing an HTML element.
+ * @param params Parameters specific to the target element's `addEventListener` method. Commonly
+ * something like `[eventName, listener, options]`.
  */
@@ -27,0 +26,0 @@ function useEventListener(target) {

cjs/useKeyboardEvent/useKeyboardEvent.d.ts

@@ -7,3 +7,3 @@ import { DependencyList, RefObject } from 'react';
     /**
-     * Event name that triggers handler.
+     * Keyboard event which triggers `callback`.
      * @default `keydown`
@@ -13,3 +13,3 @@ */
     /**
-     * Target that should emit event.
+     * Target element that emits `event`.
      * @default window
@@ -19,3 +19,3 @@ */
     /**
-     * Options that will be passed to underlying `useEventListener` hook.
+     * Options passed to the underlying `useEventListener` hook.
      */
@@ -25,9 +25,9 @@ eventOptions?: boolean | AddEventListenerOptions;
 /**
- * Executes callback when keyboard event occurred on target (window by default).
+ * Invokes a callback when a keyboard event occurs on the chosen target element.
  *
- * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
- * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
- * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param keyOrPredicate Filters key presses on which `callback` is invoked.
+ * @param callback Function to call when a key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that is passed to the underlying `useMemo`.
  * @param options Hook options.
  */
 export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: KeyboardEventFilter, callback: KeyboardEventHandler<T>, deps?: DependencyList, options?: UseKeyboardEventOptions<T>): void;

cjs/useKeyboardEvent/useKeyboardEvent.js

@@ -18,7 +18,7 @@ "use strict";
 /**
- * Executes callback when keyboard event occurred on target (window by default).
+ * Invokes a callback when a keyboard event occurs on the chosen target element.
  *
- * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
- * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
- * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param keyOrPredicate Filters key presses on which `callback` is invoked.
+ * @param callback Function to call when a key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that is passed to the underlying `useMemo`.
  * @param options Hook options.
@@ -25,0 +25,0 @@ */

cjs/useWindowSize/useWindowSize.d.ts

@@ -7,7 +7,9 @@ import { useRafState } from '../useRafState/useRafState';
 /**
- * Tracks window inner dimensions.
+ * Tracks the inner dimensions of the browser window.
  *
- * @param stateHook State hook that will be used internally. Default: `useRafState`.
- * @param measureOnMount Perform size fetch during mount effect stage or synchronously with render.
+ * @param stateHook State hook that will be used to hold the dimensions of the window.
+ * @param measureOnMount If `true`, the size of the window will be measured during the effects
+  stage, after the component has mounted. If `false`, the window size is measured synchronously during
+  the component render. Set this to `true` during SSR.
  */
 export declare function useWindowSize(stateHook?: typeof useRafState, measureOnMount?: boolean): WindowSize;

cjs/useWindowSize/useWindowSize.js

@@ -19,6 +19,8 @@ "use strict";
 /**
- * Tracks window inner dimensions.
+ * Tracks the inner dimensions of the browser window.
  *
- * @param stateHook State hook that will be used internally. Default: `useRafState`.
- * @param measureOnMount Perform size fetch during mount effect stage or synchronously with render.
+ * @param stateHook State hook that will be used to hold the dimensions of the window.
+ * @param measureOnMount If `true`, the size of the window will be measured during the effects
+  stage, after the component has mounted. If `false`, the window size is measured synchronously during
+  the component render. Set this to `true` during SSR.
  */
@@ -25,0 +27,0 @@ function useWindowSize(stateHook, measureOnMount) {

esm/index.js

 // Callback
-export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
-export { useRafCallback } from './useRafCallback/useRafCallback';
-export { useThrottledCallback } from './useThrottledCallback/useThrottledCallback';
+export { useDebouncedCallback } from "./useDebouncedCallback/useDebouncedCallback.js";
+export { useRafCallback } from "./useRafCallback/useRafCallback.js";
+export { useThrottledCallback } from "./useThrottledCallback/useThrottledCallback.js";
 // Lifecycle
-export { useConditionalEffect } from './useConditionalEffect/useConditionalEffect';
-export { useCustomCompareEffect } from './useCustomCompareEffect/useCustomCompareEffect';
-export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
-export { useDeepCompareEffect } from './useDeepCompareEffect/useDeepCompareEffect';
-export { useFirstMountState } from './useFirstMountState/useFirstMountState';
-export { useIsMounted } from './useIsMounted/useIsMounted';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
-export { useMountEffect } from './useMountEffect/useMountEffect';
-export { useRafEffect } from './useRafEffect/useRafEffect';
-export { useRerender } from './useRerender/useRerender';
-export { useThrottledEffect } from './useThrottledEffect/useThrottledEffect';
-export { useUnmountEffect } from './useUnmountEffect/useUnmountEffect';
-export { useUpdateEffect } from './useUpdateEffect/useUpdateEffect';
-export { useLifecycleLogger } from './useLifecycleLogger/useLifecycleLogger';
-export { useIntervalEffect } from './useIntervalEffect/useIntervalEffect';
-export { useTimeoutEffect } from './useTimeoutEffect/useTimeoutEffect';
+export { useConditionalEffect } from "./useConditionalEffect/useConditionalEffect.js";
+export { useCustomCompareEffect } from "./useCustomCompareEffect/useCustomCompareEffect.js";
+export { useDebouncedEffect } from "./useDebouncedEffect/useDebouncedEffect.js";
+export { useDeepCompareEffect } from "./useDeepCompareEffect/useDeepCompareEffect.js";
+export { useFirstMountState } from "./useFirstMountState/useFirstMountState.js";
+export { useIsMounted } from "./useIsMounted/useIsMounted.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+export { useMountEffect } from "./useMountEffect/useMountEffect.js";
+export { useRafEffect } from "./useRafEffect/useRafEffect.js";
+export { useRerender } from "./useRerender/useRerender.js";
+export { useThrottledEffect } from "./useThrottledEffect/useThrottledEffect.js";
+export { useUnmountEffect } from "./useUnmountEffect/useUnmountEffect.js";
+export { useUpdateEffect } from "./useUpdateEffect/useUpdateEffect.js";
+export { useLifecycleLogger } from "./useLifecycleLogger/useLifecycleLogger.js";
+export { useIntervalEffect } from "./useIntervalEffect/useIntervalEffect.js";
+export { useTimeoutEffect } from "./useTimeoutEffect/useTimeoutEffect.js";
 // State
-export { useControlledRerenderState } from './useControlledRerenderState/useControlledRerenderState';
-export { useCounter } from './useCounter/useCounter';
-export { useDebouncedState } from './useDebouncedState/useDebouncedState';
-export { useFunctionalState } from './useFunctionalState/useFunctionalState';
-export { useList } from './useList/useList';
-export { useMap } from './useMap/useMap';
-export { useMediatedState } from './useMediatedState/useMediatedState';
-export { usePrevious } from './usePrevious/usePrevious';
-export { usePreviousDistinct } from './usePreviousDistinct/usePreviousDistinct';
-export { useRafState } from './useRafState/useRafState';
-export { useRenderCount } from './useRenderCount/useRenderCount';
-export { useSafeState } from './useSafeState/useSafeState';
-export { useSet } from './useSet/useSet';
-export { useToggle } from './useToggle/useToggle';
-export { useThrottledState } from './useThrottledState/useThrottledState';
-export { useValidator, } from './useValidator/useValidator';
+export { useControlledRerenderState } from "./useControlledRerenderState/useControlledRerenderState.js";
+export { useCounter } from "./useCounter/useCounter.js";
+export { useDebouncedState } from "./useDebouncedState/useDebouncedState.js";
+export { useFunctionalState } from "./useFunctionalState/useFunctionalState.js";
+export { useList } from "./useList/useList.js";
+export { useMap } from "./useMap/useMap.js";
+export { useMediatedState } from "./useMediatedState/useMediatedState.js";
+export { usePrevious } from "./usePrevious/usePrevious.js";
+export { usePreviousDistinct } from "./usePreviousDistinct/usePreviousDistinct.js";
+export { useRafState } from "./useRafState/useRafState.js";
+export { useRenderCount } from "./useRenderCount/useRenderCount.js";
+export { useSafeState } from "./useSafeState/useSafeState.js";
+export { useSet } from "./useSet/useSet.js";
+export { useToggle } from "./useToggle/useToggle.js";
+export { useThrottledState } from "./useThrottledState/useThrottledState.js";
+export { useValidator, } from "./useValidator/useValidator.js";
 // Navigator
-export { useNetworkState, } from './useNetworkState/useNetworkState';
-export { usePermission } from './usePermission/usePermission';
-export { useVibrate } from './useVibrate/useVibrate';
+export { useNetworkState, } from "./useNetworkState/useNetworkState.js";
+export { usePermission } from "./usePermission/usePermission.js";
+export { useVibrate } from "./useVibrate/useVibrate.js";
 // Miscellaneous
-export { useSyncedRef } from './useSyncedRef/useSyncedRef';
-export { useHookableRef } from './useHookableRef/useHookableRef';
-export { useCustomCompareMemo } from './useCustomCompareMemo/useCustomCompareMemo';
+export { useSyncedRef } from "./useSyncedRef/useSyncedRef.js";
+export { useHookableRef } from "./useHookableRef/useHookableRef.js";
+export { useCustomCompareMemo } from "./useCustomCompareMemo/useCustomCompareMemo.js";
 // SideEffect
-export { useLocalStorageValue } from './useLocalStorageValue/useLocalStorageValue';
-export { useSessionStorageValue } from './useSessionStorageValue/useSessionStorageValue';
-export { useAsync, } from './useAsync/useAsync';
-export { useAsyncAbortable, } from './useAsyncAbortable/useAsyncAbortable';
+export { useLocalStorageValue } from "./useLocalStorageValue/useLocalStorageValue.js";
+export { useSessionStorageValue } from "./useSessionStorageValue/useSessionStorageValue.js";
+export { useAsync, } from "./useAsync/useAsync.js";
+export { useAsyncAbortable, } from "./useAsyncAbortable/useAsyncAbortable.js";
 // Sensor
-export { useIntersectionObserver, } from './useIntersectionObserver/useIntersectionObserver';
-export { useResizeObserver, } from './useResizeObserver/useResizeObserver';
-export { useMeasure } from './useMeasure/useMeasure';
-export { useMediaQuery } from './useMediaQuery/useMediaQuery';
-export { useKeyboardEvent, } from './useKeyboardEvent/useKeyboardEvent';
-export { useScreenOrientation, } from './useScreenOrientation/useScreenOrientation';
+export { useIntersectionObserver, } from "./useIntersectionObserver/useIntersectionObserver.js";
+export { useResizeObserver, } from "./useResizeObserver/useResizeObserver.js";
+export { useMeasure } from "./useMeasure/useMeasure.js";
+export { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
+export { useKeyboardEvent, } from "./useKeyboardEvent/useKeyboardEvent.js";
+export { useScreenOrientation, } from "./useScreenOrientation/useScreenOrientation.js";
 // Dom
-export { useClickOutside } from './useClickOutside/useClickOutside';
-export { useEventListener } from './useEventListener/useEventListener';
-export { useWindowSize } from './useWindowSize/useWindowSize';
-export { truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
-export { resolveHookState } from './util/resolveHookState';
+export { useClickOutside } from "./useClickOutside/useClickOutside.js";
+export { useEventListener } from "./useEventListener/useEventListener.js";
+export { useWindowSize } from "./useWindowSize/useWindowSize.js";
+export { truthyAndArrayPredicate, truthyOrArrayPredicate } from "./util/const.js";
+export { resolveHookState } from "./util/resolveHookState.js";
 // Types
-export * from './types';
-export { useDeepCompareMemo } from './useDeepCompareMemo/useDeepCompareMemo';
+export * from "./types.js";
+export { useDeepCompareMemo } from "./useDeepCompareMemo/useDeepCompareMemo.js";

esm/useAsync/useAsync.js

@@ -13,4 +13,4 @@ var __assign = (this && this.__assign) || function () {
 import { useMemo, useRef } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -17,0 +17,0 @@ * Tracks the result and errors of the provided async function and provides handles to control its execution.

esm/useAsyncAbortable/useAsyncAbortable.js

@@ -58,3 +58,3 @@ var __assign = (this && this.__assign) || function () {
 import { useMemo, useRef } from 'react';
-import { useAsync } from '../useAsync/useAsync';
+import { useAsync } from "../useAsync/useAsync.js";
 /**
@@ -61,0 +61,0 @@ * Like `useAsync`, but also provides `AbortSignal` as the first argument to the async function.

esm/useClickOutside/useClickOutside.d.ts

 import { MutableRefObject, RefObject } from 'react';
 /**
- * Triggers callback when user clicks outside the target element.
+ * Triggers a callback when the user clicks outside a target element.
  *
- * @param ref React ref object with target HTML element.
- * @param callback Callback that will be triggered during the click.
- * @param events Events list that will be used as triggers for outside click.
- * Default: 'mousedown', 'touchstart'
+ * @param ref React ref object containing the target HTML element.
+ * @param callback Callback invoked when the user clicks outside the target element.
+ * @param events List of events that will be used as triggers for the outside click. Default:
+ * 'mousedown', 'touchstart'
  */
 export declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T> | MutableRefObject<T>, callback: EventListener, events?: string[]): void;

esm/useClickOutside/useClickOutside.js

@@ -11,12 +11,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useEffect } from 'react';
-import { off, on } from '../util/misc';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { off, on } from "../util/misc.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 var DEFAULT_EVENTS = ['mousedown', 'touchstart'];
 /**
- * Triggers callback when user clicks outside the target element.
+ * Triggers a callback when the user clicks outside a target element.
  *
- * @param ref React ref object with target HTML element.
- * @param callback Callback that will be triggered during the click.
- * @param events Events list that will be used as triggers for outside click.
- * Default: 'mousedown', 'touchstart'
+ * @param ref React ref object containing the target HTML element.
+ * @param callback Callback invoked when the user clicks outside the target element.
+ * @param events List of events that will be used as triggers for the outside click. Default:
+ * 'mousedown', 'touchstart'
  */
@@ -23,0 +23,0 @@ export function useClickOutside(ref, callback, events) {

esm/useConditionalEffect/useConditionalEffect.js

@@ -12,3 +12,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useEffect } from 'react';
-import { truthyAndArrayPredicate } from '../util/const';
+import { truthyAndArrayPredicate } from "../util/const.js";
 /**
@@ -15,0 +15,0 @@ * Like `useEffect` but callback invoked only if conditions match predicate.

esm/useControlledRerenderState/useControlledRerenderState.js

 import { useCallback, useRef } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useRerender } from '../useRerender/useRerender';
-import { resolveHookState } from '../util/resolveHookState';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useRerender } from "../useRerender/useRerender.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Like `React.useState`, but its state setter accepts extra argument, that allows to cancel

esm/useCookieValue/useCookieValue.js

@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { useCallback, useEffect } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useMountEffect } from '../useMountEffect/useMountEffect';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { isBrowser } from '../util/const';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useMountEffect } from "../useMountEffect/useMountEffect.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { isBrowser } from "../util/const.js";
 var cookiesSetters = new Map();
@@ -22,0 +22,0 @@ var registerSetter = function (key, setter) {

esm/useCounter/useCounter.js

 import { useMemo } from 'react';
-import { useMediatedState } from '../useMediatedState/useMediatedState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { resolveHookState } from '../util/resolveHookState';
+import { useMediatedState } from "../useMediatedState/useMediatedState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Tracks a numeric value.

esm/useCustomCompareEffect/useCustomCompareEffect.js

@@ -12,4 +12,4 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useEffect, useRef } from 'react';
-import { isBrowser } from '../util/const';
-import { basicDepsComparator } from '../util/misc';
+import { isBrowser } from "../util/const.js";
+import { basicDepsComparator } from "../util/misc.js";
 /**
@@ -16,0 +16,0 @@ * Like `useEffect` but uses provided comparator function to validate dependency changes.

esm/useDebouncedCallback/useDebouncedCallback.js

@@ -12,3 +12,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useMemo, useRef } from 'react';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
 /**
@@ -15,0 +15,0 @@ * Makes passed function debounced, otherwise acts like `useCallback`.

esm/useDebouncedEffect/useDebouncedEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
-import { useDebouncedCallback } from '../useDebouncedCallback/useDebouncedCallback';
+import { useDebouncedCallback } from "../useDebouncedCallback/useDebouncedCallback.js";
 /**
@@ -5,0 +5,0 @@ * Like `useEffect`, but passed function is debounced.

esm/useDebouncedState/useDebouncedState.js

@@ -1,3 +0,3 @@
-import { useDebouncedCallback } from '../useDebouncedCallback/useDebouncedCallback';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useDebouncedCallback } from "../useDebouncedCallback/useDebouncedCallback.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
 /**
@@ -4,0 +4,0 @@ * Like `useSafeState` but its state setter is debounced.

esm/useDeepCompareEffect/useDeepCompareEffect.js

@@ -12,3 +12,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { isEqual } from '@react-hookz/deep-equal';
-import { useCustomCompareEffect, } from '../useCustomCompareEffect/useCustomCompareEffect';
+import { useCustomCompareEffect, } from "../useCustomCompareEffect/useCustomCompareEffect.js";
 /**
@@ -15,0 +15,0 @@ * Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep

esm/useDeepCompareMemo/useDeepCompareMemo.js

 import { isEqual } from '@react-hookz/deep-equal';
-import { useCustomCompareMemo } from '../useCustomCompareMemo/useCustomCompareMemo';
+import { useCustomCompareMemo } from "../useCustomCompareMemo/useCustomCompareMemo.js";
 /**
@@ -4,0 +4,0 @@ * Like useMemo but validates dependency changes using deep equality check instead of reference check.

esm/useEventListener/useEventListener.d.ts

 import { RefObject } from 'react';
 /**
- *  Subscribes an event listener to the target, and automatically unsubscribes
- *  it on unmount.
+ *  An HTML element or ref object containing an HTML element.
  *
- * @param target Element ref object or element itself.
- * @param params Parameters specific for target's `addEventListener`. Commonly,
- * it is `[eventName, listener, options]`.
+ * @param target An HTML element or ref object containing an HTML element.
+ * @param params Parameters specific to the target element's `addEventListener` method. Commonly
+ * something like `[eventName, listener, options]`.
  */
 export declare function useEventListener<T extends EventTarget>(target: RefObject<T> | T | null, ...params: Parameters<T['addEventListener']> | [string, EventListenerOrEventListenerObject | ((...args: any[]) => any), ...any]): void;

esm/useEventListener/useEventListener.js

@@ -12,12 +12,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useEffect, useMemo } from 'react';
-import { useIsMounted } from '../useIsMounted/useIsMounted';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { hasOwnProperty } from '../util/misc';
+import { useIsMounted } from "../useIsMounted/useIsMounted.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { hasOwnProperty } from "../util/misc.js";
 /**
- *  Subscribes an event listener to the target, and automatically unsubscribes
- *  it on unmount.
+ *  An HTML element or ref object containing an HTML element.
  *
- * @param target Element ref object or element itself.
- * @param params Parameters specific for target's `addEventListener`. Commonly,
- * it is `[eventName, listener, options]`.
+ * @param target An HTML element or ref object containing an HTML element.
+ * @param params Parameters specific to the target element's `addEventListener` method. Commonly
+ * something like `[eventName, listener, options]`.
  */
@@ -24,0 +23,0 @@ export function useEventListener(target) {

esm/useFunctionalState/useFunctionalState.js

 import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -5,0 +5,0 @@ * Like `useState` but instead of raw state, state getter returned. `useSafeState` is

esm/useHookableRef/useHookableRef.js

 import { useMemo } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -4,0 +4,0 @@ * Like `React.useRef` but it is possible to define get and set handlers.

esm/useIntersectionObserver/useIntersectionObserver.js

@@ -11,3 +11,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useEffect } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useSafeState } from "../useSafeState/useSafeState.js";
 var DEFAULT_THRESHOLD = [0];
@@ -14,0 +14,0 @@ var DEFAULT_ROOT_MARGIN = '0px';

esm/useIntervalEffect/useIntervalEffect.js

 import { useEffect } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -4,0 +4,0 @@ * Like `setInterval` but in form of react hook.

esm/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

 import { useEffect, useLayoutEffect } from 'react';
-import { isBrowser } from '../util/const';
+import { isBrowser } from "../util/const.js";
 /**
@@ -4,0 +4,0 @@ * Alias for `useLayoutEffect` in browser, but for `useEffect` at server side. Helps to avoid

esm/useKeyboardEvent/useKeyboardEvent.d.ts

@@ -7,3 +7,3 @@ import { DependencyList, RefObject } from 'react';
     /**
-     * Event name that triggers handler.
+     * Keyboard event which triggers `callback`.
      * @default `keydown`
@@ -13,3 +13,3 @@ */
     /**
-     * Target that should emit event.
+     * Target element that emits `event`.
      * @default window
@@ -19,3 +19,3 @@ */
     /**
-     * Options that will be passed to underlying `useEventListener` hook.
+     * Options passed to the underlying `useEventListener` hook.
      */
@@ -25,9 +25,9 @@ eventOptions?: boolean | AddEventListenerOptions;
 /**
- * Executes callback when keyboard event occurred on target (window by default).
+ * Invokes a callback when a keyboard event occurs on the chosen target element.
  *
- * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
- * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
- * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param keyOrPredicate Filters key presses on which `callback` is invoked.
+ * @param callback Function to call when a key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that is passed to the underlying `useMemo`.
  * @param options Hook options.
  */
 export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: KeyboardEventFilter, callback: KeyboardEventHandler<T>, deps?: DependencyList, options?: UseKeyboardEventOptions<T>): void;

esm/useKeyboardEvent/useKeyboardEvent.js

 import { useMemo } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useEventListener } from '../useEventListener/useEventListener';
-import { isBrowser } from '../util/const';
-import { yieldFalse, yieldTrue } from '../util/misc';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useEventListener } from "../useEventListener/useEventListener.js";
+import { isBrowser } from "../util/const.js";
+import { yieldFalse, yieldTrue } from "../util/misc.js";
 var createKeyPredicate = function (keyFilter) {
@@ -15,7 +15,7 @@ if (typeof keyFilter === 'function')
 /**
- * Executes callback when keyboard event occurred on target (window by default).
+ * Invokes a callback when a keyboard event occurs on the chosen target element.
  *
- * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
- * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
- * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param keyOrPredicate Filters key presses on which `callback` is invoked.
+ * @param callback Function to call when a key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that is passed to the underlying `useMemo`.
  * @param options Hook options.
@@ -22,0 +22,0 @@ */

esm/useList/useList.js

@@ -11,5 +11,5 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useMemo, useRef } from 'react';
-import { resolveHookState } from '../util/resolveHookState';
-import { useRerender } from '../useRerender/useRerender';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { resolveHookState } from "../util/resolveHookState.js";
+import { useRerender } from "../useRerender/useRerender.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 export function useList(initialList) {
@@ -16,0 +16,0 @@ var initial = useSyncedRef(initialList);

esm/useLocalStorageValue/useLocalStorageValue.js

@@ -1,3 +0,3 @@
-import { useStorageValue, } from '../useStorageValue/useStorageValue';
-import { isBrowser, noop } from '../util/const';
+import { useStorageValue, } from "../useStorageValue/useStorageValue.js";
+import { isBrowser, noop } from "../util/const.js";
 var IS_LOCAL_STORAGE_AVAILABLE;
@@ -4,0 +4,0 @@ try {

esm/useMap/useMap.js

 import { useRef } from 'react';
-import { useRerender } from '../useRerender/useRerender';
+import { useRerender } from "../useRerender/useRerender.js";
 var proto = Map.prototype;
@@ -4,0 +4,0 @@ /**

esm/useMeasure/useMeasure.js

@@ -1,5 +0,5 @@
-import { useResizeObserver, } from '../useResizeObserver/useResizeObserver';
-import { useHookableRef } from '../useHookableRef/useHookableRef';
-import { useRafCallback } from '../useRafCallback/useRafCallback';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useResizeObserver, } from "../useResizeObserver/useResizeObserver.js";
+import { useHookableRef } from "../useHookableRef/useHookableRef.js";
+import { useRafCallback } from "../useRafCallback/useRafCallback.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
 /**
@@ -6,0 +6,0 @@ * Uses ResizeObserver to track element dimensions and re-render component when they change.

esm/useMediaQuery/useMediaQuery.js

 import { useEffect, useState } from 'react';
-import { isBrowser } from '../util/const';
+import { isBrowser } from "../util/const.js";
 var queriesMap = new Map();
@@ -4,0 +4,0 @@ var createQueryEntry = function (query) {

esm/useMediatedState/useMediatedState.js

 import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { resolveHookState } from '../util/resolveHookState';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Like `useState`, but every value set is passed through a mediator function.

esm/useNetworkState/useNetworkState.js

 import { useEffect } from 'react';
-import { isBrowser } from '../util/const';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { off, on } from '../util/misc';
+import { isBrowser } from "../util/const.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { off, on } from "../util/misc.js";
 var navigator = isBrowser ? window.navigator : undefined;
@@ -6,0 +6,0 @@ var conn = navigator && (navigator.connection || navigator.mozConnection || navigator.webkitConnection);

esm/usePermission/usePermission.js

 import { useEffect } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { off, on } from '../util/misc';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { off, on } from "../util/misc.js";
 /**
@@ -5,0 +5,0 @@ * Tracks a permission state.

esm/usePreviousDistinct/usePreviousDistinct.js

 import { useRef, useState } from 'react';
-import { useUpdateEffect } from '../useUpdateEffect/useUpdateEffect';
-import { isStrictEqual } from '../util/const';
+import { useUpdateEffect } from "../useUpdateEffect/useUpdateEffect.js";
+import { isStrictEqual } from "../util/const.js";
 /**
@@ -5,0 +5,0 @@ * Returns the most recent _distinct_ value passed to the hook on previous render. Distinct here

esm/useRafCallback/useRafCallback.js

 import { useCallback, useMemo, useRef } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
-import { isBrowser } from '../util/const';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
+import { isBrowser } from "../util/const.js";
 /**
@@ -6,0 +6,0 @@ * Makes passed function to be called within next animation frame.

esm/useRafEffect/useRafEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
-import { useRafCallback } from '../useRafCallback/useRafCallback';
+import { useRafCallback } from "../useRafCallback/useRafCallback.js";
 /**
@@ -5,0 +5,0 @@ * Like `React.useEffect`, but state is only updated within animation frame.

esm/useRafState/useRafState.js

@@ -1,4 +0,4 @@
-import { useRafCallback } from '../useRafCallback/useRafCallback';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
+import { useRafCallback } from "../useRafCallback/useRafCallback.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
 /**
@@ -5,0 +5,0 @@ * Like `React.useState`, but state is only updated within animation frame.

esm/useRerender/useRerender.js

 import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useSafeState } from "../useSafeState/useSafeState.js";
 var stateChanger = function (state) { return (state + 1) % Number.MAX_SAFE_INTEGER; };
@@ -4,0 +4,0 @@ /**

esm/useResizeObserver/useResizeObserver.js

 import { useEffect } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { isBrowser } from '../util/const';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { isBrowser } from "../util/const.js";
 var observerSingleton;
@@ -5,0 +5,0 @@ function getResizeObserver() {

esm/useSafeState/useSafeState.js

 import { useCallback, useState } from 'react';
-import { useIsMounted } from '../useIsMounted/useIsMounted';
+import { useIsMounted } from "../useIsMounted/useIsMounted.js";
 /**
@@ -4,0 +4,0 @@ * Like `useState` but its state setter is guarded against setting the state of an unmounted component.

esm/useScreenOrientation/useScreenOrientation.js

@@ -1,2 +0,2 @@
-import { useMediaQuery } from '../useMediaQuery/useMediaQuery';
+import { useMediaQuery } from "../useMediaQuery/useMediaQuery.js";
 /**
@@ -3,0 +3,0 @@ * Checks if screen is in `portrait` or `landscape` orientation.

esm/useSessionStorageValue/useSessionStorageValue.js

@@ -1,3 +0,3 @@
-import { useStorageValue, } from '../useStorageValue/useStorageValue';
-import { isBrowser, noop } from '../util/const';
+import { useStorageValue, } from "../useStorageValue/useStorageValue.js";
+import { isBrowser, noop } from "../util/const.js";
 var IS_SESSION_STORAGE_AVAILABLE;
@@ -4,0 +4,0 @@ try {

esm/useSet/useSet.js

 import { useRef } from 'react';
-import { useRerender } from '../useRerender/useRerender';
+import { useRerender } from "../useRerender/useRerender.js";
 var proto = Set.prototype;
@@ -4,0 +4,0 @@ /**

esm/useStorageValue/useStorageValue.js

@@ -14,9 +14,9 @@ var __assign = (this && this.__assign) || function () {
 import { useEffect, useMemo, useState } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useUpdateEffect } from '../useUpdateEffect/useUpdateEffect';
-import { isBrowser } from '../util/const';
-import { off, on } from '../util/misc';
-import { resolveHookState } from '../util/resolveHookState';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useUpdateEffect } from "../useUpdateEffect/useUpdateEffect.js";
+import { isBrowser } from "../util/const.js";
+import { off, on } from "../util/misc.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 var storageListeners = new Map();
@@ -23,0 +23,0 @@ var invokeStorageKeyListeners = function (s, key, value, skipListener) {

esm/useThrottledCallback/useThrottledCallback.js

@@ -12,3 +12,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { useMemo, useRef } from 'react';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
 /**
@@ -15,0 +15,0 @@ * Makes passed function throttled, otherwise acts like `useCallback`.

esm/useThrottledEffect/useThrottledEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
-import { useThrottledCallback } from '../useThrottledCallback/useThrottledCallback';
+import { useThrottledCallback } from "../useThrottledCallback/useThrottledCallback.js";
 /**
@@ -5,0 +5,0 @@ * Like `useEffect`, but passed function is throttled.

esm/useThrottledState/useThrottledState.js

@@ -1,3 +0,3 @@
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useThrottledCallback } from '../useThrottledCallback/useThrottledCallback';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useThrottledCallback } from "../useThrottledCallback/useThrottledCallback.js";
 /**
@@ -4,0 +4,0 @@ * Like `useSafeState` but its state setter is throttled.

esm/useTimeoutEffect/useTimeoutEffect.js

 import { useCallback, useEffect, useRef } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 var cancelTimeout = function (id) {
@@ -4,0 +4,0 @@ if (id) {

esm/useToggle/useToggle.js

 import { useCallback } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { resolveHookState } from '../util/resolveHookState';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Like `useSafeState`, but can only become `true` or `false`.

esm/useUnmountEffect/useUnmountEffect.js

 import { useEffect } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -4,0 +4,0 @@ * Run effect only when component is unmounted.

esm/useUpdateEffect/useUpdateEffect.js

 import { useEffect } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { noop } from '../util/const';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { noop } from "../util/const.js";
 /**
@@ -5,0 +5,0 @@ * Effect hook that ignores the first render (not invoked on mount).

esm/useValidator/useValidator.js

 import { useCallback, useEffect } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -5,0 +5,0 @@ * Performs validation when any of provided dependencies has changed.

esm/useVibrate/useVibrate.js

 import { useEffect } from 'react';
-import { isBrowser, noop } from '../util/const';
+import { isBrowser, noop } from "../util/const.js";
 /**
@@ -4,0 +4,0 @@ * Provides vibration feedback using the Vibration API.

esm/useWindowSize/useWindowSize.d.ts

@@ -7,7 +7,9 @@ import { useRafState } from '../useRafState/useRafState';
 /**
- * Tracks window inner dimensions.
+ * Tracks the inner dimensions of the browser window.
  *
- * @param stateHook State hook that will be used internally. Default: `useRafState`.
- * @param measureOnMount Perform size fetch during mount effect stage or synchronously with render.
+ * @param stateHook State hook that will be used to hold the dimensions of the window.
+ * @param measureOnMount If `true`, the size of the window will be measured during the effects
+  stage, after the component has mounted. If `false`, the window size is measured synchronously during
+  the component render. Set this to `true` during SSR.
  */
 export declare function useWindowSize(stateHook?: typeof useRafState, measureOnMount?: boolean): WindowSize;

esm/useWindowSize/useWindowSize.js

 import { useEffect } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useMountEffect } from '../useMountEffect/useMountEffect';
-import { useRafState } from '../useRafState/useRafState';
-import { isBrowser } from '../util/const';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useMountEffect } from "../useMountEffect/useMountEffect.js";
+import { useRafState } from "../useRafState/useRafState.js";
+import { isBrowser } from "../util/const.js";
 var listeners = new Set();
@@ -16,6 +16,8 @@ var callAllListeners = function () {
 /**
- * Tracks window inner dimensions.
+ * Tracks the inner dimensions of the browser window.
  *
- * @param stateHook State hook that will be used internally. Default: `useRafState`.
- * @param measureOnMount Perform size fetch during mount effect stage or synchronously with render.
+ * @param stateHook State hook that will be used to hold the dimensions of the window.
+ * @param measureOnMount If `true`, the size of the window will be measured during the effects
+  stage, after the component has mounted. If `false`, the window size is measured synchronously during
+  the component render. Set this to `true` during SSR.
  */
@@ -22,0 +24,0 @@ export function useWindowSize(stateHook, measureOnMount) {

esnext/index.js

 // Callback
-export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
-export { useRafCallback } from './useRafCallback/useRafCallback';
-export { useThrottledCallback } from './useThrottledCallback/useThrottledCallback';
+export { useDebouncedCallback } from "./useDebouncedCallback/useDebouncedCallback.js";
+export { useRafCallback } from "./useRafCallback/useRafCallback.js";
+export { useThrottledCallback } from "./useThrottledCallback/useThrottledCallback.js";
 // Lifecycle
-export { useConditionalEffect } from './useConditionalEffect/useConditionalEffect';
-export { useCustomCompareEffect } from './useCustomCompareEffect/useCustomCompareEffect';
-export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
-export { useDeepCompareEffect } from './useDeepCompareEffect/useDeepCompareEffect';
-export { useFirstMountState } from './useFirstMountState/useFirstMountState';
-export { useIsMounted } from './useIsMounted/useIsMounted';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
-export { useMountEffect } from './useMountEffect/useMountEffect';
-export { useRafEffect } from './useRafEffect/useRafEffect';
-export { useRerender } from './useRerender/useRerender';
-export { useThrottledEffect } from './useThrottledEffect/useThrottledEffect';
-export { useUnmountEffect } from './useUnmountEffect/useUnmountEffect';
-export { useUpdateEffect } from './useUpdateEffect/useUpdateEffect';
-export { useLifecycleLogger } from './useLifecycleLogger/useLifecycleLogger';
-export { useIntervalEffect } from './useIntervalEffect/useIntervalEffect';
-export { useTimeoutEffect } from './useTimeoutEffect/useTimeoutEffect';
+export { useConditionalEffect } from "./useConditionalEffect/useConditionalEffect.js";
+export { useCustomCompareEffect } from "./useCustomCompareEffect/useCustomCompareEffect.js";
+export { useDebouncedEffect } from "./useDebouncedEffect/useDebouncedEffect.js";
+export { useDeepCompareEffect } from "./useDeepCompareEffect/useDeepCompareEffect.js";
+export { useFirstMountState } from "./useFirstMountState/useFirstMountState.js";
+export { useIsMounted } from "./useIsMounted/useIsMounted.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+export { useMountEffect } from "./useMountEffect/useMountEffect.js";
+export { useRafEffect } from "./useRafEffect/useRafEffect.js";
+export { useRerender } from "./useRerender/useRerender.js";
+export { useThrottledEffect } from "./useThrottledEffect/useThrottledEffect.js";
+export { useUnmountEffect } from "./useUnmountEffect/useUnmountEffect.js";
+export { useUpdateEffect } from "./useUpdateEffect/useUpdateEffect.js";
+export { useLifecycleLogger } from "./useLifecycleLogger/useLifecycleLogger.js";
+export { useIntervalEffect } from "./useIntervalEffect/useIntervalEffect.js";
+export { useTimeoutEffect } from "./useTimeoutEffect/useTimeoutEffect.js";
 // State
-export { useControlledRerenderState } from './useControlledRerenderState/useControlledRerenderState';
-export { useCounter } from './useCounter/useCounter';
-export { useDebouncedState } from './useDebouncedState/useDebouncedState';
-export { useFunctionalState } from './useFunctionalState/useFunctionalState';
-export { useList } from './useList/useList';
-export { useMap } from './useMap/useMap';
-export { useMediatedState } from './useMediatedState/useMediatedState';
-export { usePrevious } from './usePrevious/usePrevious';
-export { usePreviousDistinct } from './usePreviousDistinct/usePreviousDistinct';
-export { useRafState } from './useRafState/useRafState';
-export { useRenderCount } from './useRenderCount/useRenderCount';
-export { useSafeState } from './useSafeState/useSafeState';
-export { useSet } from './useSet/useSet';
-export { useToggle } from './useToggle/useToggle';
-export { useThrottledState } from './useThrottledState/useThrottledState';
-export { useValidator, } from './useValidator/useValidator';
+export { useControlledRerenderState } from "./useControlledRerenderState/useControlledRerenderState.js";
+export { useCounter } from "./useCounter/useCounter.js";
+export { useDebouncedState } from "./useDebouncedState/useDebouncedState.js";
+export { useFunctionalState } from "./useFunctionalState/useFunctionalState.js";
+export { useList } from "./useList/useList.js";
+export { useMap } from "./useMap/useMap.js";
+export { useMediatedState } from "./useMediatedState/useMediatedState.js";
+export { usePrevious } from "./usePrevious/usePrevious.js";
+export { usePreviousDistinct } from "./usePreviousDistinct/usePreviousDistinct.js";
+export { useRafState } from "./useRafState/useRafState.js";
+export { useRenderCount } from "./useRenderCount/useRenderCount.js";
+export { useSafeState } from "./useSafeState/useSafeState.js";
+export { useSet } from "./useSet/useSet.js";
+export { useToggle } from "./useToggle/useToggle.js";
+export { useThrottledState } from "./useThrottledState/useThrottledState.js";
+export { useValidator, } from "./useValidator/useValidator.js";
 // Navigator
-export { useNetworkState, } from './useNetworkState/useNetworkState';
-export { usePermission } from './usePermission/usePermission';
-export { useVibrate } from './useVibrate/useVibrate';
+export { useNetworkState, } from "./useNetworkState/useNetworkState.js";
+export { usePermission } from "./usePermission/usePermission.js";
+export { useVibrate } from "./useVibrate/useVibrate.js";
 // Miscellaneous
-export { useSyncedRef } from './useSyncedRef/useSyncedRef';
-export { useHookableRef } from './useHookableRef/useHookableRef';
-export { useCustomCompareMemo } from './useCustomCompareMemo/useCustomCompareMemo';
+export { useSyncedRef } from "./useSyncedRef/useSyncedRef.js";
+export { useHookableRef } from "./useHookableRef/useHookableRef.js";
+export { useCustomCompareMemo } from "./useCustomCompareMemo/useCustomCompareMemo.js";
 // SideEffect
-export { useLocalStorageValue } from './useLocalStorageValue/useLocalStorageValue';
-export { useSessionStorageValue } from './useSessionStorageValue/useSessionStorageValue';
-export { useAsync, } from './useAsync/useAsync';
-export { useAsyncAbortable, } from './useAsyncAbortable/useAsyncAbortable';
+export { useLocalStorageValue } from "./useLocalStorageValue/useLocalStorageValue.js";
+export { useSessionStorageValue } from "./useSessionStorageValue/useSessionStorageValue.js";
+export { useAsync, } from "./useAsync/useAsync.js";
+export { useAsyncAbortable, } from "./useAsyncAbortable/useAsyncAbortable.js";
 // Sensor
-export { useIntersectionObserver, } from './useIntersectionObserver/useIntersectionObserver';
-export { useResizeObserver, } from './useResizeObserver/useResizeObserver';
-export { useMeasure } from './useMeasure/useMeasure';
-export { useMediaQuery } from './useMediaQuery/useMediaQuery';
-export { useKeyboardEvent, } from './useKeyboardEvent/useKeyboardEvent';
-export { useScreenOrientation, } from './useScreenOrientation/useScreenOrientation';
+export { useIntersectionObserver, } from "./useIntersectionObserver/useIntersectionObserver.js";
+export { useResizeObserver, } from "./useResizeObserver/useResizeObserver.js";
+export { useMeasure } from "./useMeasure/useMeasure.js";
+export { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
+export { useKeyboardEvent, } from "./useKeyboardEvent/useKeyboardEvent.js";
+export { useScreenOrientation, } from "./useScreenOrientation/useScreenOrientation.js";
 // Dom
-export { useClickOutside } from './useClickOutside/useClickOutside';
-export { useEventListener } from './useEventListener/useEventListener';
-export { useWindowSize } from './useWindowSize/useWindowSize';
-export { truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
-export { resolveHookState } from './util/resolveHookState';
+export { useClickOutside } from "./useClickOutside/useClickOutside.js";
+export { useEventListener } from "./useEventListener/useEventListener.js";
+export { useWindowSize } from "./useWindowSize/useWindowSize.js";
+export { truthyAndArrayPredicate, truthyOrArrayPredicate } from "./util/const.js";
+export { resolveHookState } from "./util/resolveHookState.js";
 // Types
-export * from './types';
-export { useDeepCompareMemo } from './useDeepCompareMemo/useDeepCompareMemo';
+export * from "./types.js";
+export { useDeepCompareMemo } from "./useDeepCompareMemo/useDeepCompareMemo.js";

esnext/useAsync/useAsync.js

 import { useMemo, useRef } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -5,0 +5,0 @@ * Tracks the result and errors of the provided async function and provides handles to control its execution.

esnext/useAsyncAbortable/useAsyncAbortable.js

 import { useMemo, useRef } from 'react';
-import { useAsync } from '../useAsync/useAsync';
+import { useAsync } from "../useAsync/useAsync.js";
 /**
@@ -4,0 +4,0 @@ * Like `useAsync`, but also provides `AbortSignal` as the first argument to the async function.

esnext/useClickOutside/useClickOutside.d.ts

 import { MutableRefObject, RefObject } from 'react';
 /**
- * Triggers callback when user clicks outside the target element.
+ * Triggers a callback when the user clicks outside a target element.
  *
- * @param ref React ref object with target HTML element.
- * @param callback Callback that will be triggered during the click.
- * @param events Events list that will be used as triggers for outside click.
- * Default: 'mousedown', 'touchstart'
+ * @param ref React ref object containing the target HTML element.
+ * @param callback Callback invoked when the user clicks outside the target element.
+ * @param events List of events that will be used as triggers for the outside click. Default:
+ * 'mousedown', 'touchstart'
  */
 export declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T> | MutableRefObject<T>, callback: EventListener, events?: string[]): void;

esnext/useClickOutside/useClickOutside.js

 import { useEffect } from 'react';
-import { off, on } from '../util/misc';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { off, on } from "../util/misc.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 const DEFAULT_EVENTS = ['mousedown', 'touchstart'];
 /**
- * Triggers callback when user clicks outside the target element.
+ * Triggers a callback when the user clicks outside a target element.
  *
- * @param ref React ref object with target HTML element.
- * @param callback Callback that will be triggered during the click.
- * @param events Events list that will be used as triggers for outside click.
- * Default: 'mousedown', 'touchstart'
+ * @param ref React ref object containing the target HTML element.
+ * @param callback Callback invoked when the user clicks outside the target element.
+ * @param events List of events that will be used as triggers for the outside click. Default:
+ * 'mousedown', 'touchstart'
  */
@@ -13,0 +13,0 @@ export function useClickOutside(ref, callback, events = DEFAULT_EVENTS) {

esnext/useConditionalEffect/useConditionalEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
-import { truthyAndArrayPredicate } from '../util/const';
+import { truthyAndArrayPredicate } from "../util/const.js";
 /**
@@ -5,0 +5,0 @@ * Like `useEffect` but callback invoked only if conditions match predicate.

esnext/useControlledRerenderState/useControlledRerenderState.js

 import { useCallback, useRef } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useRerender } from '../useRerender/useRerender';
-import { resolveHookState } from '../util/resolveHookState';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useRerender } from "../useRerender/useRerender.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Like `React.useState`, but its state setter accepts extra argument, that allows to cancel

esnext/useCookieValue/useCookieValue.js

 /* eslint-disable @typescript-eslint/no-use-before-define,no-use-before-define */
 import Cookies from 'js-cookie';
 import { useCallback, useEffect } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useMountEffect } from '../useMountEffect/useMountEffect';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { isBrowser } from '../util/const';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useMountEffect } from "../useMountEffect/useMountEffect.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { isBrowser } from "../util/const.js";
 const cookiesSetters = new Map();
@@ -10,0 +10,0 @@ const registerSetter = (key, setter) => {

esnext/useCounter/useCounter.js

 import { useMemo } from 'react';
-import { useMediatedState } from '../useMediatedState/useMediatedState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { resolveHookState } from '../util/resolveHookState';
+import { useMediatedState } from "../useMediatedState/useMediatedState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Tracks a numeric value.

esnext/useCustomCompareEffect/useCustomCompareEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef } from 'react';
-import { isBrowser } from '../util/const';
-import { basicDepsComparator } from '../util/misc';
+import { isBrowser } from "../util/const.js";
+import { basicDepsComparator } from "../util/misc.js";
 /**
@@ -6,0 +6,0 @@ * Like `useEffect` but uses provided comparator function to validate dependency changes.

esnext/useDebouncedCallback/useDebouncedCallback.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useMemo, useRef } from 'react';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
 /**
@@ -5,0 +5,0 @@ * Makes passed function debounced, otherwise acts like `useCallback`.

esnext/useDebouncedEffect/useDebouncedEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
-import { useDebouncedCallback } from '../useDebouncedCallback/useDebouncedCallback';
+import { useDebouncedCallback } from "../useDebouncedCallback/useDebouncedCallback.js";
 /**
@@ -5,0 +5,0 @@ * Like `useEffect`, but passed function is debounced.

esnext/useDebouncedState/useDebouncedState.js

@@ -1,3 +0,3 @@
-import { useDebouncedCallback } from '../useDebouncedCallback/useDebouncedCallback';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useDebouncedCallback } from "../useDebouncedCallback/useDebouncedCallback.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
 /**
@@ -4,0 +4,0 @@ * Like `useSafeState` but its state setter is debounced.

esnext/useDeepCompareEffect/useDeepCompareEffect.js

 import { useEffect } from 'react';
 import { isEqual } from '@react-hookz/deep-equal';
-import { useCustomCompareEffect, } from '../useCustomCompareEffect/useCustomCompareEffect';
+import { useCustomCompareEffect, } from "../useCustomCompareEffect/useCustomCompareEffect.js";
 /**
@@ -5,0 +5,0 @@ * Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep

esnext/useDeepCompareMemo/useDeepCompareMemo.js

 import { isEqual } from '@react-hookz/deep-equal';
-import { useCustomCompareMemo } from '../useCustomCompareMemo/useCustomCompareMemo';
+import { useCustomCompareMemo } from "../useCustomCompareMemo/useCustomCompareMemo.js";
 /**
@@ -4,0 +4,0 @@ * Like useMemo but validates dependency changes using deep equality check instead of reference check.

esnext/useEventListener/useEventListener.d.ts

 import { RefObject } from 'react';
 /**
- *  Subscribes an event listener to the target, and automatically unsubscribes
- *  it on unmount.
+ *  An HTML element or ref object containing an HTML element.
  *
- * @param target Element ref object or element itself.
- * @param params Parameters specific for target's `addEventListener`. Commonly,
- * it is `[eventName, listener, options]`.
+ * @param target An HTML element or ref object containing an HTML element.
+ * @param params Parameters specific to the target element's `addEventListener` method. Commonly
+ * something like `[eventName, listener, options]`.
  */
 export declare function useEventListener<T extends EventTarget>(target: RefObject<T> | T | null, ...params: Parameters<T['addEventListener']> | [string, EventListenerOrEventListenerObject | ((...args: any[]) => any), ...any]): void;

esnext/useEventListener/useEventListener.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useMemo } from 'react';
-import { useIsMounted } from '../useIsMounted/useIsMounted';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { hasOwnProperty } from '../util/misc';
+import { useIsMounted } from "../useIsMounted/useIsMounted.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { hasOwnProperty } from "../util/misc.js";
 /**
- *  Subscribes an event listener to the target, and automatically unsubscribes
- *  it on unmount.
+ *  An HTML element or ref object containing an HTML element.
  *
- * @param target Element ref object or element itself.
- * @param params Parameters specific for target's `addEventListener`. Commonly,
- * it is `[eventName, listener, options]`.
+ * @param target An HTML element or ref object containing an HTML element.
+ * @param params Parameters specific to the target element's `addEventListener` method. Commonly
+ * something like `[eventName, listener, options]`.
  */
@@ -14,0 +13,0 @@ export function useEventListener(target, ...params) {

esnext/useFunctionalState/useFunctionalState.js

 import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -5,0 +5,0 @@ * Like `useState` but instead of raw state, state getter returned. `useSafeState` is

esnext/useHookableRef/useHookableRef.js

 import { useMemo } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -4,0 +4,0 @@ * Like `React.useRef` but it is possible to define get and set handlers.

esnext/useIntersectionObserver/useIntersectionObserver.js

 import { useEffect } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useSafeState } from "../useSafeState/useSafeState.js";
 const DEFAULT_THRESHOLD = [0];
@@ -4,0 +4,0 @@ const DEFAULT_ROOT_MARGIN = '0px';

esnext/useIntervalEffect/useIntervalEffect.js

 import { useEffect } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -4,0 +4,0 @@ * Like `setInterval` but in form of react hook.

esnext/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

 import { useEffect, useLayoutEffect } from 'react';
-import { isBrowser } from '../util/const';
+import { isBrowser } from "../util/const.js";
 /**
@@ -4,0 +4,0 @@ * Alias for `useLayoutEffect` in browser, but for `useEffect` at server side. Helps to avoid

esnext/useKeyboardEvent/useKeyboardEvent.d.ts

@@ -7,3 +7,3 @@ import { DependencyList, RefObject } from 'react';
     /**
-     * Event name that triggers handler.
+     * Keyboard event which triggers `callback`.
      * @default `keydown`
@@ -13,3 +13,3 @@ */
     /**
-     * Target that should emit event.
+     * Target element that emits `event`.
      * @default window
@@ -19,3 +19,3 @@ */
     /**
-     * Options that will be passed to underlying `useEventListener` hook.
+     * Options passed to the underlying `useEventListener` hook.
      */
@@ -25,9 +25,9 @@ eventOptions?: boolean | AddEventListenerOptions;
 /**
- * Executes callback when keyboard event occurred on target (window by default).
+ * Invokes a callback when a keyboard event occurs on the chosen target element.
  *
- * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
- * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
- * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param keyOrPredicate Filters key presses on which `callback` is invoked.
+ * @param callback Function to call when a key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that is passed to the underlying `useMemo`.
  * @param options Hook options.
  */
 export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: KeyboardEventFilter, callback: KeyboardEventHandler<T>, deps?: DependencyList, options?: UseKeyboardEventOptions<T>): void;

esnext/useKeyboardEvent/useKeyboardEvent.js

 import { useMemo } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useEventListener } from '../useEventListener/useEventListener';
-import { isBrowser } from '../util/const';
-import { yieldFalse, yieldTrue } from '../util/misc';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useEventListener } from "../useEventListener/useEventListener.js";
+import { isBrowser } from "../util/const.js";
+import { yieldFalse, yieldTrue } from "../util/misc.js";
 const createKeyPredicate = (keyFilter) => {
@@ -15,7 +15,7 @@ if (typeof keyFilter === 'function')
 /**
- * Executes callback when keyboard event occurred on target (window by default).
+ * Invokes a callback when a keyboard event occurs on the chosen target element.
  *
- * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
- * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
- * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param keyOrPredicate Filters key presses on which `callback` is invoked.
+ * @param callback Function to call when a key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that is passed to the underlying `useMemo`.
  * @param options Hook options.
@@ -22,0 +22,0 @@ */

esnext/useList/useList.js

 import { useMemo, useRef } from 'react';
-import { resolveHookState } from '../util/resolveHookState';
-import { useRerender } from '../useRerender/useRerender';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { resolveHookState } from "../util/resolveHookState.js";
+import { useRerender } from "../useRerender/useRerender.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 export function useList(initialList) {
@@ -6,0 +6,0 @@ const initial = useSyncedRef(initialList);

esnext/useLocalStorageValue/useLocalStorageValue.js

@@ -1,3 +0,3 @@
-import { useStorageValue, } from '../useStorageValue/useStorageValue';
-import { isBrowser, noop } from '../util/const';
+import { useStorageValue, } from "../useStorageValue/useStorageValue.js";
+import { isBrowser, noop } from "../util/const.js";
 let IS_LOCAL_STORAGE_AVAILABLE;
@@ -4,0 +4,0 @@ try {

esnext/useMap/useMap.js

 import { useRef } from 'react';
-import { useRerender } from '../useRerender/useRerender';
+import { useRerender } from "../useRerender/useRerender.js";
 const proto = Map.prototype;
@@ -4,0 +4,0 @@ /**

esnext/useMeasure/useMeasure.js

@@ -1,5 +0,5 @@
-import { useResizeObserver, } from '../useResizeObserver/useResizeObserver';
-import { useHookableRef } from '../useHookableRef/useHookableRef';
-import { useRafCallback } from '../useRafCallback/useRafCallback';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useResizeObserver, } from "../useResizeObserver/useResizeObserver.js";
+import { useHookableRef } from "../useHookableRef/useHookableRef.js";
+import { useRafCallback } from "../useRafCallback/useRafCallback.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
 /**
@@ -6,0 +6,0 @@ * Uses ResizeObserver to track element dimensions and re-render component when they change.

esnext/useMediaQuery/useMediaQuery.js

 import { useEffect, useState } from 'react';
-import { isBrowser } from '../util/const';
+import { isBrowser } from "../util/const.js";
 const queriesMap = new Map();
@@ -4,0 +4,0 @@ const createQueryEntry = (query) => {

esnext/useMediatedState/useMediatedState.js

 import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { resolveHookState } from '../util/resolveHookState';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Like `useState`, but every value set is passed through a mediator function.

esnext/useNetworkState/useNetworkState.js

 import { useEffect } from 'react';
-import { isBrowser } from '../util/const';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { off, on } from '../util/misc';
+import { isBrowser } from "../util/const.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { off, on } from "../util/misc.js";
 const navigator = isBrowser ? window.navigator : undefined;
@@ -6,0 +6,0 @@ const conn = navigator && (navigator.connection || navigator.mozConnection || navigator.webkitConnection);

esnext/usePermission/usePermission.js

 import { useEffect } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { off, on } from '../util/misc';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { off, on } from "../util/misc.js";
 /**
@@ -5,0 +5,0 @@ * Tracks a permission state.

esnext/usePreviousDistinct/usePreviousDistinct.js

 import { useRef, useState } from 'react';
-import { useUpdateEffect } from '../useUpdateEffect/useUpdateEffect';
-import { isStrictEqual } from '../util/const';
+import { useUpdateEffect } from "../useUpdateEffect/useUpdateEffect.js";
+import { isStrictEqual } from "../util/const.js";
 /**
@@ -5,0 +5,0 @@ * Returns the most recent _distinct_ value passed to the hook on previous render. Distinct here

esnext/useRafCallback/useRafCallback.js

 import { useCallback, useMemo, useRef } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
-import { isBrowser } from '../util/const';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
+import { isBrowser } from "../util/const.js";
 /**
@@ -6,0 +6,0 @@ * Makes passed function to be called within next animation frame.

esnext/useRafEffect/useRafEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
-import { useRafCallback } from '../useRafCallback/useRafCallback';
+import { useRafCallback } from "../useRafCallback/useRafCallback.js";
 /**
@@ -5,0 +5,0 @@ * Like `React.useEffect`, but state is only updated within animation frame.

esnext/useRafState/useRafState.js

@@ -1,4 +0,4 @@
-import { useRafCallback } from '../useRafCallback/useRafCallback';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
+import { useRafCallback } from "../useRafCallback/useRafCallback.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
 /**
@@ -5,0 +5,0 @@ * Like `React.useState`, but state is only updated within animation frame.

esnext/useRerender/useRerender.js

 import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { useSafeState } from "../useSafeState/useSafeState.js";
 const stateChanger = (state) => (state + 1) % Number.MAX_SAFE_INTEGER;
@@ -4,0 +4,0 @@ /**

esnext/useResizeObserver/useResizeObserver.js

 import { useEffect } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { isBrowser } from '../util/const';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { isBrowser } from "../util/const.js";
 let observerSingleton;
@@ -5,0 +5,0 @@ function getResizeObserver() {

esnext/useSafeState/useSafeState.js

 import { useCallback, useState } from 'react';
-import { useIsMounted } from '../useIsMounted/useIsMounted';
+import { useIsMounted } from "../useIsMounted/useIsMounted.js";
 /**
@@ -4,0 +4,0 @@ * Like `useState` but its state setter is guarded against setting the state of an unmounted component.

esnext/useScreenOrientation/useScreenOrientation.js

@@ -1,2 +0,2 @@
-import { useMediaQuery } from '../useMediaQuery/useMediaQuery';
+import { useMediaQuery } from "../useMediaQuery/useMediaQuery.js";
 /**
@@ -3,0 +3,0 @@ * Checks if screen is in `portrait` or `landscape` orientation.

esnext/useSessionStorageValue/useSessionStorageValue.js

@@ -1,3 +0,3 @@
-import { useStorageValue, } from '../useStorageValue/useStorageValue';
-import { isBrowser, noop } from '../util/const';
+import { useStorageValue, } from "../useStorageValue/useStorageValue.js";
+import { isBrowser, noop } from "../util/const.js";
 let IS_SESSION_STORAGE_AVAILABLE;
@@ -4,0 +4,0 @@ try {

esnext/useSet/useSet.js

 import { useRef } from 'react';
-import { useRerender } from '../useRerender/useRerender';
+import { useRerender } from "../useRerender/useRerender.js";
 const proto = Set.prototype;
@@ -4,0 +4,0 @@ /**

esnext/useStorageValue/useStorageValue.js

 /* eslint-disable @typescript-eslint/no-use-before-define,no-use-before-define */
 import { useEffect, useMemo, useState } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useUpdateEffect } from '../useUpdateEffect/useUpdateEffect';
-import { isBrowser } from '../util/const';
-import { off, on } from '../util/misc';
-import { resolveHookState } from '../util/resolveHookState';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useUpdateEffect } from "../useUpdateEffect/useUpdateEffect.js";
+import { isBrowser } from "../util/const.js";
+import { off, on } from "../util/misc.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 const storageListeners = new Map();
@@ -11,0 +11,0 @@ const invokeStorageKeyListeners = (s, key, value, skipListener) => {

esnext/useThrottledCallback/useThrottledCallback.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useMemo, useRef } from 'react';
-import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
+import { useUnmountEffect } from "../useUnmountEffect/useUnmountEffect.js";
 /**
@@ -5,0 +5,0 @@ * Makes passed function throttled, otherwise acts like `useCallback`.

esnext/useThrottledEffect/useThrottledEffect.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
-import { useThrottledCallback } from '../useThrottledCallback/useThrottledCallback';
+import { useThrottledCallback } from "../useThrottledCallback/useThrottledCallback.js";
 /**
@@ -5,0 +5,0 @@ * Like `useEffect`, but passed function is throttled.

esnext/useThrottledState/useThrottledState.js

@@ -1,3 +0,3 @@
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useThrottledCallback } from '../useThrottledCallback/useThrottledCallback';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useThrottledCallback } from "../useThrottledCallback/useThrottledCallback.js";
 /**
@@ -4,0 +4,0 @@ * Like `useSafeState` but its state setter is throttled.

esnext/useTimeoutEffect/useTimeoutEffect.js

 import { useCallback, useEffect, useRef } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 const cancelTimeout = (id) => {
@@ -4,0 +4,0 @@ if (id) {

esnext/useToggle/useToggle.js

 import { useCallback } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { resolveHookState } from '../util/resolveHookState';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { resolveHookState } from "../util/resolveHookState.js";
 /**
@@ -6,0 +6,0 @@ * Like `useSafeState`, but can only become `true` or `false`.

esnext/useUnmountEffect/useUnmountEffect.js

 import { useEffect } from 'react';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -4,0 +4,0 @@ * Run effect only when component is unmounted.

esnext/useUpdateEffect/useUpdateEffect.js

 import { useEffect } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { noop } from '../util/const';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { noop } from "../util/const.js";
 /**
@@ -5,0 +5,0 @@ * Effect hook that ignores the first render (not invoked on mount).

esnext/useValidator/useValidator.js

 import { useCallback, useEffect } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
-import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+import { useSafeState } from "../useSafeState/useSafeState.js";
+import { useSyncedRef } from "../useSyncedRef/useSyncedRef.js";
 /**
@@ -5,0 +5,0 @@ * Performs validation when any of provided dependencies has changed.

esnext/useVibrate/useVibrate.js

 import { useEffect } from 'react';
-import { isBrowser, noop } from '../util/const';
+import { isBrowser, noop } from "../util/const.js";
 /**
@@ -4,0 +4,0 @@ * Provides vibration feedback using the Vibration API.

esnext/useWindowSize/useWindowSize.d.ts

@@ -7,7 +7,9 @@ import { useRafState } from '../useRafState/useRafState';
 /**
- * Tracks window inner dimensions.
+ * Tracks the inner dimensions of the browser window.
  *
- * @param stateHook State hook that will be used internally. Default: `useRafState`.
- * @param measureOnMount Perform size fetch during mount effect stage or synchronously with render.
+ * @param stateHook State hook that will be used to hold the dimensions of the window.
+ * @param measureOnMount If `true`, the size of the window will be measured during the effects
+  stage, after the component has mounted. If `false`, the window size is measured synchronously during
+  the component render. Set this to `true` during SSR.
  */
 export declare function useWindowSize(stateHook?: typeof useRafState, measureOnMount?: boolean): WindowSize;

esnext/useWindowSize/useWindowSize.js

 import { useEffect } from 'react';
-import { useFirstMountState } from '../useFirstMountState/useFirstMountState';
-import { useMountEffect } from '../useMountEffect/useMountEffect';
-import { useRafState } from '../useRafState/useRafState';
-import { isBrowser } from '../util/const';
+import { useFirstMountState } from "../useFirstMountState/useFirstMountState.js";
+import { useMountEffect } from "../useMountEffect/useMountEffect.js";
+import { useRafState } from "../useRafState/useRafState.js";
+import { isBrowser } from "../util/const.js";
 const listeners = new Set();
@@ -16,6 +16,8 @@ const callAllListeners = () => {
 /**
- * Tracks window inner dimensions.
+ * Tracks the inner dimensions of the browser window.
  *
- * @param stateHook State hook that will be used internally. Default: `useRafState`.
- * @param measureOnMount Perform size fetch during mount effect stage or synchronously with render.
+ * @param stateHook State hook that will be used to hold the dimensions of the window.
+ * @param measureOnMount If `true`, the size of the window will be measured during the effects
+  stage, after the component has mounted. If `false`, the window size is measured synchronously during
+  the component render. Set this to `true` during SSR.
  */
@@ -22,0 +24,0 @@ export function useWindowSize(stateHook = useRafState, measureOnMount) {

package.json

 {
   "name": "@react-hookz/web",
-  "version": "20.0.1",
+  "version": "20.0.2",
   "description": "React hooks done right, for browser and SSR.",
@@ -116,3 +116,3 @@ "keywords": [
     "lint-staged": "^13.1.0",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.1",
     "react": "^17.0.2",
@@ -124,6 +124,6 @@ "react-dom": "^17.0.2",
     "ts-node": "^10.9.1",
-    "ttypescript": "^1.5.13",
-    "typescript": "^4.9.3",
+    "ttypescript": "^1.5.15",
+    "typescript": "^4.9.4",
     "yarn": "^1.22.19"
   }
 }

README.md

@@ -8,3 +8,3 @@ <div align="center">
 [![NPM Dependents](https://flat.badgen.net/npm/dependents/@react-hookz/web)](https://www.npmjs.com/package/@react-hookz/web)
-[![Build](https://img.shields.io/github/workflow/status/react-hookz/web/CI?style=flat-square)](https://github.com/react-hookz/web/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/react-hookz/web/ci-cd.yml?branch=master&style=flat-square)](https://github.com/react-hookz/web/actions)
 [![Coverage](https://flat.badgen.net/codecov/c/github/react-hookz/web)](https://app.codecov.io/gh/react-hookz/web)
@@ -201,9 +201,9 @@ [![Types](https://flat.badgen.net/npm/types/@react-hookz/web)](https://www.npmjs.com/package/@react-hookz/web)
   - [**`useClickOutside`**](https://react-hookz.github.io/web/?path=/docs/dom-useclickoutside--example)
-    — Triggers a callback when user clicks outside the target element.
+    — Triggers a callback when the user clicks outside a target element.
   - [**`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.
+    — Subscribes an event listener to a target element.
   - [**`useKeyboardEvent`**](https://react-hookz.github.io/web/?path=/docs/dom-usekeyboardevent--example)
-    — Executes a callback whenever a keyboard event occurs on the target.
+    — Invokes a callback when a keyboard event occurs on the chosen target.
   - [**`useWindowSize`**](https://react-hookz.github.io/web/?path=/docs/dom-usewindowsize--example)
-    — Tracks the inner dimensions of the window.
+    — Tracks the inner dimensions of the browser window.
 
@@ -210,0 +210,0 @@ ## Contributors

No alert changes

Improved metrics

Total package byte prevSize

464447

increased by0.49%

Lines of code

9960

increased by0.06%

No dependency changes