react-simplikit 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +1 -41
  3. package/dist/hooks/useDebouncedCallback/useDebouncedCallback.cjs +24 -6
  4. package/dist/hooks/useDebouncedCallback/useDebouncedCallback.d.cts +17 -7
  5. package/dist/hooks/useDebouncedCallback/useDebouncedCallback.d.mts +17 -7
  6. package/dist/hooks/useDebouncedCallback/useDebouncedCallback.mjs +24 -6
  7. package/dist/hooks/useDoubleClick/useDoubleClick.cjs +0 -4
  8. package/dist/hooks/useDoubleClick/useDoubleClick.d.cts +0 -4
  9. package/dist/hooks/useDoubleClick/useDoubleClick.d.mts +0 -4
  10. package/dist/hooks/useDoubleClick/useDoubleClick.mjs +0 -4
  11. package/dist/hooks/useGeolocation/useGeolocation.cjs +0 -4
  12. package/dist/hooks/useGeolocation/useGeolocation.d.cts +0 -4
  13. package/dist/hooks/useGeolocation/useGeolocation.d.mts +0 -4
  14. package/dist/hooks/useGeolocation/useGeolocation.mjs +0 -4
  15. package/dist/hooks/useImpressionRef/useImpressionRef.cjs +7 -5
  16. package/dist/hooks/useImpressionRef/useImpressionRef.d.cts +0 -4
  17. package/dist/hooks/useImpressionRef/useImpressionRef.d.mts +0 -4
  18. package/dist/hooks/useImpressionRef/useImpressionRef.mjs +7 -5
  19. package/dist/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -5
  20. package/dist/hooks/useIntersectionObserver/useIntersectionObserver.d.cts +1 -5
  21. package/dist/hooks/useIntersectionObserver/useIntersectionObserver.d.mts +1 -5
  22. package/dist/hooks/useIntersectionObserver/useIntersectionObserver.mjs +1 -5
  23. package/dist/hooks/useList/useList.cjs +11 -8
  24. package/dist/hooks/useList/useList.d.cts +12 -9
  25. package/dist/hooks/useList/useList.d.mts +12 -9
  26. package/dist/hooks/useList/useList.mjs +11 -8
  27. package/dist/hooks/useLongPress/useLongPress.cjs +0 -4
  28. package/dist/hooks/useLongPress/useLongPress.d.cts +0 -4
  29. package/dist/hooks/useLongPress/useLongPress.d.mts +0 -4
  30. package/dist/hooks/useLongPress/useLongPress.mjs +0 -4
  31. package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.cjs +0 -4
  32. package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.d.cts +0 -4
  33. package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.d.mts +0 -4
  34. package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.mjs +0 -4
  35. package/dist/hooks/useSet/useSet.cjs +11 -2
  36. package/dist/hooks/useSet/useSet.d.cts +11 -2
  37. package/dist/hooks/useSet/useSet.d.mts +11 -2
  38. package/dist/hooks/useSet/useSet.mjs +11 -2
  39. package/dist/hooks/useStorageState/useStorageState.d.cts +0 -4
  40. package/dist/hooks/useStorageState/useStorageState.d.mts +0 -4
  41. package/dist/hooks/useThrottledCallback/useThrottledCallback.cjs +16 -9
  42. package/dist/hooks/useThrottledCallback/useThrottledCallback.d.cts +18 -11
  43. package/dist/hooks/useThrottledCallback/useThrottledCallback.d.mts +18 -11
  44. package/dist/hooks/useThrottledCallback/useThrottledCallback.mjs +16 -9
  45. package/dist/hooks/useVisibilityEvent/useVisibilityEvent.cjs +2 -4
  46. package/dist/hooks/useVisibilityEvent/useVisibilityEvent.d.cts +2 -4
  47. package/dist/hooks/useVisibilityEvent/useVisibilityEvent.d.mts +2 -4
  48. package/dist/hooks/useVisibilityEvent/useVisibilityEvent.mjs +2 -4
  49. package/dist/index.d.cts +2 -2
  50. package/dist/index.d.mts +2 -2
  51. package/dist/mobile/hooks/usePageVisibility/usePageVisibility.cjs +2 -0
  52. package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.cts +2 -0
  53. package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.mts +2 -0
  54. package/dist/mobile/hooks/usePageVisibility/usePageVisibility.mjs +2 -0
  55. package/dist/utils/mergeProps/mergeProps.cjs +1 -1
  56. package/dist/utils/mergeProps/mergeProps.d.cts +1 -1
  57. package/dist/utils/mergeProps/mergeProps.d.mts +1 -1
  58. package/dist/utils/mergeProps/mergeProps.mjs +1 -1
  59. package/dist/utils/mergeRefs/mergeRefs.cjs +1 -1
  60. package/dist/utils/mergeRefs/mergeRefs.d.cts +1 -1
  61. package/dist/utils/mergeRefs/mergeRefs.d.mts +1 -1
  62. package/dist/utils/mergeRefs/mergeRefs.mjs +1 -1
  63. package/package.json +1 -3
@@ -14,15 +14,18 @@ type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
14
14
  * A React hook that manages an array as state.
15
15
  * Provides efficient state management and stable action functions.
16
16
  *
17
- * @param {T[]} initialState - Initial array state
18
- *
19
- * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
20
- * - `push` - Appends a value to the end of the list
21
- * - `insertAt` - Inserts a value at the specified index
22
- * - `updateAt` - Updates the value at the specified index
23
- * - `removeAt` - Removes the value at the specified index
24
- * - `setAll` - Replaces the entire list with a new array
25
- * - `reset` - Resets the list to its initial state
17
+ * @template T - The type of the values held in the list.
18
+ *
19
+ * @param {T[]} [initialState=[]] - Initial array state.
20
+ *
21
+ * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it.
22
+ * - list `ReadonlyArray<T>` - The current array state;
23
+ * - actions.push `(value: T) => void` - Appends a value to the end of the list;
24
+ * - actions.insertAt `(index: number, value: T) => void` - Inserts a value at the specified index;
25
+ * - actions.updateAt `(index: number, value: T) => void` - Updates the value at the specified index;
26
+ * - actions.removeAt `(index: number) => void` - Removes the value at the specified index;
27
+ * - actions.setAll `(values: T[]) => void` - Replaces the entire list with a new array;
28
+ * - actions.reset `() => void` - Resets the list to its initial state;
26
29
  *
27
30
  * @example
28
31
  * ```tsx
@@ -8,15 +8,18 @@ import { useMemo, useState } from "react";
8
8
  * A React hook that manages an array as state.
9
9
  * Provides efficient state management and stable action functions.
10
10
  *
11
- * @param {T[]} initialState - Initial array state
11
+ * @template T - The type of the values held in the list.
12
12
  *
13
- * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
14
- * - `push` - Appends a value to the end of the list
15
- * - `insertAt` - Inserts a value at the specified index
16
- * - `updateAt` - Updates the value at the specified index
17
- * - `removeAt` - Removes the value at the specified index
18
- * - `setAll` - Replaces the entire list with a new array
19
- * - `reset` - Resets the list to its initial state
13
+ * @param {T[]} [initialState=[]] - Initial array state.
14
+ *
15
+ * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it.
16
+ * - list `ReadonlyArray<T>` - The current array state;
17
+ * - actions.push `(value: T) => void` - Appends a value to the end of the list;
18
+ * - actions.insertAt `(index: number, value: T) => void` - Inserts a value at the specified index;
19
+ * - actions.updateAt `(index: number, value: T) => void` - Updates the value at the specified index;
20
+ * - actions.removeAt `(index: number) => void` - Removes the value at the specified index;
21
+ * - actions.setAll `(values: T[]) => void` - Replaces the entire list with a new array;
22
+ * - actions.reset `() => void` - Resets the list to its initial state;
20
23
  *
21
24
  * @example
22
25
  * ```tsx
@@ -3,10 +3,6 @@ const require_usePreservedCallback = require("../usePreservedCallback/usePreserv
3
3
  let react = require("react");
4
4
  //#region src/hooks/useLongPress/useLongPress.ts
5
5
  /**
6
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
7
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
8
- * This hook will be removed in a future major version.
9
- *
10
6
  * @description
11
7
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
12
8
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -12,10 +12,6 @@ type UseLongPressOptions<E extends HTMLElement> = {
12
12
  onLongPressEnd?: Handler<E>;
13
13
  };
14
14
  /**
15
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
16
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
17
- * This hook will be removed in a future major version.
18
- *
19
15
  * @description
20
16
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
21
17
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -12,10 +12,6 @@ type UseLongPressOptions<E extends HTMLElement> = {
12
12
  onLongPressEnd?: Handler<E>;
13
13
  };
14
14
  /**
15
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
16
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
17
- * This hook will be removed in a future major version.
18
- *
19
15
  * @description
20
16
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
21
17
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -3,10 +3,6 @@ import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallba
3
3
  import { useCallback, useRef } from "react";
4
4
  //#region src/hooks/useLongPress/useLongPress.ts
5
5
  /**
6
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
7
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
8
- * This hook will be removed in a future major version.
9
- *
10
6
  * @description
11
7
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
12
8
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -3,10 +3,6 @@ const require_usePreservedCallback = require("../usePreservedCallback/usePreserv
3
3
  let react = require("react");
4
4
  //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
5
5
  /**
6
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
7
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
8
- * This hook will be removed in a future major version.
9
- *
10
6
  * @description
11
7
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
12
8
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
@@ -2,10 +2,6 @@
2
2
  //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.d.ts
3
3
  type OneOrMore<T> = T | T[];
4
4
  /**
5
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
6
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
7
- * This hook will be removed in a future major version.
8
- *
9
5
  * @description
10
6
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
11
7
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
@@ -2,10 +2,6 @@
2
2
  //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.d.ts
3
3
  type OneOrMore<T> = T | T[];
4
4
  /**
5
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
6
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
7
- * This hook will be removed in a future major version.
8
- *
9
5
  * @description
10
6
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
11
7
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
@@ -3,10 +3,6 @@ import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallba
3
3
  import { useEffect, useRef } from "react";
4
4
  //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
5
5
  /**
6
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
7
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
8
- * This hook will be removed in a future major version.
9
- *
10
6
  * @description
11
7
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
12
8
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
@@ -8,8 +8,17 @@ let react = require("react");
8
8
  * A React hook that manages a Set as state.
9
9
  * Provides efficient state management and stable action functions.
10
10
  *
11
- * @param {SetOrValues<T>} initialState - Initial Set state (Set object or array of values)
12
- * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it
11
+ * @template T - The type of the values held in the set.
12
+ *
13
+ * @param {SetOrValues<T>} [initialState=new Set()] - Initial Set state (Set object or array of values).
14
+ *
15
+ * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it.
16
+ * - [0] `Omit<Set<T>, 'add' | 'clear' | 'delete'>` - The current Set state with mutation methods hidden;
17
+ * - [1].add `(value: T) => void` - Adds a value to the set;
18
+ * - [1].remove `(value: T) => void` - Removes a value from the set;
19
+ * - [1].toggle `(value: T) => void` - Adds the value if absent, removes it if present;
20
+ * - [1].setAll `(values: Set<T> | T[]) => void` - Replaces all values in the set;
21
+ * - [1].reset `() => void` - Resets the set to its initial state;
13
22
  *
14
23
  * @example
15
24
  * ```tsx
@@ -14,8 +14,17 @@ type UseSetReturn<T> = [Omit<Set<T>, 'add' | 'clear' | 'delete'>, SetActions<T>]
14
14
  * A React hook that manages a Set as state.
15
15
  * Provides efficient state management and stable action functions.
16
16
  *
17
- * @param {SetOrValues<T>} initialState - Initial Set state (Set object or array of values)
18
- * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it
17
+ * @template T - The type of the values held in the set.
18
+ *
19
+ * @param {SetOrValues<T>} [initialState=new Set()] - Initial Set state (Set object or array of values).
20
+ *
21
+ * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it.
22
+ * - [0] `Omit<Set<T>, 'add' | 'clear' | 'delete'>` - The current Set state with mutation methods hidden;
23
+ * - [1].add `(value: T) => void` - Adds a value to the set;
24
+ * - [1].remove `(value: T) => void` - Removes a value from the set;
25
+ * - [1].toggle `(value: T) => void` - Adds the value if absent, removes it if present;
26
+ * - [1].setAll `(values: Set<T> | T[]) => void` - Replaces all values in the set;
27
+ * - [1].reset `() => void` - Resets the set to its initial state;
19
28
  *
20
29
  * @example
21
30
  * ```tsx
@@ -14,8 +14,17 @@ type UseSetReturn<T> = [Omit<Set<T>, 'add' | 'clear' | 'delete'>, SetActions<T>]
14
14
  * A React hook that manages a Set as state.
15
15
  * Provides efficient state management and stable action functions.
16
16
  *
17
- * @param {SetOrValues<T>} initialState - Initial Set state (Set object or array of values)
18
- * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it
17
+ * @template T - The type of the values held in the set.
18
+ *
19
+ * @param {SetOrValues<T>} [initialState=new Set()] - Initial Set state (Set object or array of values).
20
+ *
21
+ * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it.
22
+ * - [0] `Omit<Set<T>, 'add' | 'clear' | 'delete'>` - The current Set state with mutation methods hidden;
23
+ * - [1].add `(value: T) => void` - Adds a value to the set;
24
+ * - [1].remove `(value: T) => void` - Removes a value from the set;
25
+ * - [1].toggle `(value: T) => void` - Adds the value if absent, removes it if present;
26
+ * - [1].setAll `(values: Set<T> | T[]) => void` - Replaces all values in the set;
27
+ * - [1].reset `() => void` - Resets the set to its initial state;
19
28
  *
20
29
  * @example
21
30
  * ```tsx
@@ -8,8 +8,17 @@ import { useMemo, useState } from "react";
8
8
  * A React hook that manages a Set as state.
9
9
  * Provides efficient state management and stable action functions.
10
10
  *
11
- * @param {SetOrValues<T>} initialState - Initial Set state (Set object or array of values)
12
- * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it
11
+ * @template T - The type of the values held in the set.
12
+ *
13
+ * @param {SetOrValues<T>} [initialState=new Set()] - Initial Set state (Set object or array of values).
14
+ *
15
+ * @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it.
16
+ * - [0] `Omit<Set<T>, 'add' | 'clear' | 'delete'>` - The current Set state with mutation methods hidden;
17
+ * - [1].add `(value: T) => void` - Adds a value to the set;
18
+ * - [1].remove `(value: T) => void` - Removes a value from the set;
19
+ * - [1].toggle `(value: T) => void` - Adds the value if absent, removes it if present;
20
+ * - [1].setAll `(values: Set<T> | T[]) => void` - Replaces all values in the set;
21
+ * - [1].reset `() => void` - Resets the set to its initial state;
13
22
  *
14
23
  * @example
15
24
  * ```tsx
@@ -17,10 +17,6 @@ type StorageStateOptionsWithSerializer<T> = StorageStateOptions<T> & {
17
17
  };
18
18
  type SerializableGuard<T extends readonly any[]> = T[0] extends any ? T : T[0] extends never ? 'Received a non-serializable value' : T;
19
19
  /**
20
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (localStorage/sessionStorage).
21
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
22
- * This hook will be removed in a future major version.
23
- *
24
20
  * @description
25
21
  * `useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
26
22
  * The value is retained across page reloads and can be shared between tabs when using `localStorage`.
@@ -17,10 +17,6 @@ type StorageStateOptionsWithSerializer<T> = StorageStateOptions<T> & {
17
17
  };
18
18
  type SerializableGuard<T extends readonly any[]> = T[0] extends any ? T : T[0] extends never ? 'Received a non-serializable value' : T;
19
19
  /**
20
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (localStorage/sessionStorage).
21
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
22
- * This hook will be removed in a future major version.
23
- *
24
20
  * @description
25
21
  * `useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
26
22
  * The value is retained across page reloads and can be shared between tabs when using `localStorage`.
@@ -17,20 +17,27 @@ const NOT_INVOKED = Symbol("NOT_INVOKED");
17
17
  * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
18
18
  * The throttled callback will only be invoked at most once per specified interval.
19
19
  *
20
+ * @template T - The type of the value passed to `onChange`.
20
21
  * @param {Object} options - The options object.
21
- * @param {Function} options.onChange - The callback function to throttle.
22
+ * @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
22
23
  * @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
23
24
  * @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
24
25
  *
25
- * @returns {Function} A throttled function that limits invoking the callback.
26
+ * @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
26
27
  *
27
28
  * @example
28
- * function ScrollTracker() {
29
- * const throttledScroll = useThrottledCallback({
30
- * onChange: (scrollY: number) => console.log(scrollY),
31
- * timeThreshold: 200,
32
- * });
33
- * return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
29
+ * import { useThrottledCallback } from 'react-simplikit';
30
+ * import { useState } from 'react';
31
+ *
32
+ * function ScrollPosition() {
33
+ * const [scrollTop, setScrollTop] = useState(0);
34
+ * const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
35
+ *
36
+ * return (
37
+ * <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
38
+ * <p>Scrolled {scrollTop}px</p>
39
+ * </div>
40
+ * );
34
41
  * }
35
42
  */
36
43
  function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
@@ -47,12 +54,12 @@ function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "tr
47
54
  }, []);
48
55
  const preservedEdges = require_usePreservedReference.usePreservedReference(edges);
49
56
  return (0, react.useCallback)((nextValue) => {
57
+ ref.current.clearPreviousThrottle();
50
58
  if (nextValue === ref.current.value) return;
51
59
  const throttled = require_throttle.throttle(() => {
52
60
  handleChange(nextValue);
53
61
  ref.current.value = nextValue;
54
62
  }, timeThreshold, { edges: preservedEdges });
55
- ref.current.clearPreviousThrottle();
56
63
  throttled();
57
64
  ref.current.clearPreviousThrottle = throttled.cancel;
58
65
  }, [
@@ -8,25 +8,32 @@ type ThrottleOptions = {
8
8
  * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
9
9
  * The throttled callback will only be invoked at most once per specified interval.
10
10
  *
11
+ * @template T - The type of the value passed to `onChange`.
11
12
  * @param {Object} options - The options object.
12
- * @param {Function} options.onChange - The callback function to throttle.
13
+ * @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
13
14
  * @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
14
15
  * @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
15
16
  *
16
- * @returns {Function} A throttled function that limits invoking the callback.
17
+ * @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
17
18
  *
18
19
  * @example
19
- * function ScrollTracker() {
20
- * const throttledScroll = useThrottledCallback({
21
- * onChange: (scrollY: number) => console.log(scrollY),
22
- * timeThreshold: 200,
23
- * });
24
- * return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
20
+ * import { useThrottledCallback } from 'react-simplikit';
21
+ * import { useState } from 'react';
22
+ *
23
+ * function ScrollPosition() {
24
+ * const [scrollTop, setScrollTop] = useState(0);
25
+ * const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
26
+ *
27
+ * return (
28
+ * <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
29
+ * <p>Scrolled {scrollTop}px</p>
30
+ * </div>
31
+ * );
25
32
  * }
26
33
  */
27
- declare function useThrottledCallback({ onChange, timeThreshold, edges }: ThrottleOptions & {
28
- onChange: (newValue: boolean) => void;
34
+ declare function useThrottledCallback<T>({ onChange, timeThreshold, edges }: ThrottleOptions & {
35
+ onChange: (newValue: T) => void;
29
36
  timeThreshold: number;
30
- }): (nextValue: boolean) => void;
37
+ }): (nextValue: T) => void;
31
38
  //#endregion
32
39
  export { useThrottledCallback };
@@ -8,25 +8,32 @@ type ThrottleOptions = {
8
8
  * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
9
9
  * The throttled callback will only be invoked at most once per specified interval.
10
10
  *
11
+ * @template T - The type of the value passed to `onChange`.
11
12
  * @param {Object} options - The options object.
12
- * @param {Function} options.onChange - The callback function to throttle.
13
+ * @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
13
14
  * @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
14
15
  * @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
15
16
  *
16
- * @returns {Function} A throttled function that limits invoking the callback.
17
+ * @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
17
18
  *
18
19
  * @example
19
- * function ScrollTracker() {
20
- * const throttledScroll = useThrottledCallback({
21
- * onChange: (scrollY: number) => console.log(scrollY),
22
- * timeThreshold: 200,
23
- * });
24
- * return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
20
+ * import { useThrottledCallback } from 'react-simplikit';
21
+ * import { useState } from 'react';
22
+ *
23
+ * function ScrollPosition() {
24
+ * const [scrollTop, setScrollTop] = useState(0);
25
+ * const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
26
+ *
27
+ * return (
28
+ * <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
29
+ * <p>Scrolled {scrollTop}px</p>
30
+ * </div>
31
+ * );
25
32
  * }
26
33
  */
27
- declare function useThrottledCallback({ onChange, timeThreshold, edges }: ThrottleOptions & {
28
- onChange: (newValue: boolean) => void;
34
+ declare function useThrottledCallback<T>({ onChange, timeThreshold, edges }: ThrottleOptions & {
35
+ onChange: (newValue: T) => void;
29
36
  timeThreshold: number;
30
- }): (nextValue: boolean) => void;
37
+ }): (nextValue: T) => void;
31
38
  //#endregion
32
39
  export { useThrottledCallback };
@@ -17,20 +17,27 @@ const NOT_INVOKED = Symbol("NOT_INVOKED");
17
17
  * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
18
18
  * The throttled callback will only be invoked at most once per specified interval.
19
19
  *
20
+ * @template T - The type of the value passed to `onChange`.
20
21
  * @param {Object} options - The options object.
21
- * @param {Function} options.onChange - The callback function to throttle.
22
+ * @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
22
23
  * @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
23
24
  * @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
24
25
  *
25
- * @returns {Function} A throttled function that limits invoking the callback.
26
+ * @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
26
27
  *
27
28
  * @example
28
- * function ScrollTracker() {
29
- * const throttledScroll = useThrottledCallback({
30
- * onChange: (scrollY: number) => console.log(scrollY),
31
- * timeThreshold: 200,
32
- * });
33
- * return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
29
+ * import { useThrottledCallback } from 'react-simplikit';
30
+ * import { useState } from 'react';
31
+ *
32
+ * function ScrollPosition() {
33
+ * const [scrollTop, setScrollTop] = useState(0);
34
+ * const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
35
+ *
36
+ * return (
37
+ * <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
38
+ * <p>Scrolled {scrollTop}px</p>
39
+ * </div>
40
+ * );
34
41
  * }
35
42
  */
36
43
  function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
@@ -47,12 +54,12 @@ function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "tr
47
54
  }, []);
48
55
  const preservedEdges = usePreservedReference(edges);
49
56
  return useCallback((nextValue) => {
57
+ ref.current.clearPreviousThrottle();
50
58
  if (nextValue === ref.current.value) return;
51
59
  const throttled = throttle(() => {
52
60
  handleChange(nextValue);
53
61
  ref.current.value = nextValue;
54
62
  }, timeThreshold, { edges: preservedEdges });
55
- ref.current.clearPreviousThrottle();
56
63
  throttled();
57
64
  ref.current.clearPreviousThrottle = throttled.cancel;
58
65
  }, [
@@ -2,13 +2,11 @@
2
2
  let react = require("react");
3
3
  //#region src/hooks/useVisibilityEvent/useVisibilityEvent.ts
4
4
  /**
5
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
6
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
7
- * This hook will be removed in a future major version.
8
- *
9
5
  * @description
10
6
  * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
11
7
  *
8
+ * @see `usePageVisibility` returns the visibility as state instead of running a callback.
9
+ *
12
10
  * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
13
11
  * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
14
12
  * @param {object} [options] - Optional configuration for the hook.
@@ -4,13 +4,11 @@ type Options = {
4
4
  immediate?: boolean;
5
5
  };
6
6
  /**
7
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
8
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
9
- * This hook will be removed in a future major version.
10
- *
11
7
  * @description
12
8
  * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
13
9
  *
10
+ * @see `usePageVisibility` returns the visibility as state instead of running a callback.
11
+ *
14
12
  * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
15
13
  * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
16
14
  * @param {object} [options] - Optional configuration for the hook.
@@ -4,13 +4,11 @@ type Options = {
4
4
  immediate?: boolean;
5
5
  };
6
6
  /**
7
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
8
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
9
- * This hook will be removed in a future major version.
10
- *
11
7
  * @description
12
8
  * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
13
9
  *
10
+ * @see `usePageVisibility` returns the visibility as state instead of running a callback.
11
+ *
14
12
  * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
15
13
  * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
16
14
  * @param {object} [options] - Optional configuration for the hook.
@@ -2,13 +2,11 @@
2
2
  import { useCallback, useEffect } from "react";
3
3
  //#region src/hooks/useVisibilityEvent/useVisibilityEvent.ts
4
4
  /**
5
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
6
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
7
- * This hook will be removed in a future major version.
8
- *
9
5
  * @description
10
6
  * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
11
7
  *
8
+ * @see `usePageVisibility` returns the visibility as state instead of running a callback.
9
+ *
12
10
  * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
13
11
  * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
14
12
  * @param {object} [options] - Optional configuration for the hook.
package/dist/index.d.cts CHANGED
@@ -53,7 +53,7 @@ import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrol
53
53
  import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs";
54
54
  import { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.cjs";
55
55
  import { PageVisibility, VisibilityState, usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.cjs";
56
- import { getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs";
56
+ import { SafeAreaInset, getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs";
57
57
  import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs";
58
58
  import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.cjs";
59
59
  import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.cjs";
@@ -71,4 +71,4 @@ import { mergeProps } from "./utils/mergeProps/mergeProps.cjs";
71
71
  import "./utils/mergeProps/index.cjs";
72
72
  import { mergeRefs } from "./utils/mergeRefs/mergeRefs.cjs";
73
73
  import "./utils/mergeRefs/index.cjs";
74
- export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
74
+ export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, type SafeAreaInset, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
package/dist/index.d.mts CHANGED
@@ -53,7 +53,7 @@ import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrol
53
53
  import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs";
54
54
  import { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.mjs";
55
55
  import { PageVisibility, VisibilityState, usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.mjs";
56
- import { getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs";
56
+ import { SafeAreaInset, getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs";
57
57
  import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs";
58
58
  import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.mjs";
59
59
  import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.mjs";
@@ -71,4 +71,4 @@ import { mergeProps } from "./utils/mergeProps/mergeProps.mjs";
71
71
  import "./utils/mergeProps/index.mjs";
72
72
  import { mergeRefs } from "./utils/mergeRefs/mergeRefs.mjs";
73
73
  import "./utils/mergeRefs/index.mjs";
74
- export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
74
+ export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, type SafeAreaInset, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
@@ -10,6 +10,8 @@ let react = require("react");
10
10
  *
11
11
  * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
12
12
  *
13
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
14
+ *
13
15
  * @returns {PageVisibility} Page visibility information
14
16
  * - `isVisible` - True if page is currently visible to the user
15
17
  * - `visibilityState` - Current visibility state: 'visible' | 'hidden'
@@ -22,6 +22,8 @@ type PageVisibility = {
22
22
  *
23
23
  * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
24
24
  *
25
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
26
+ *
25
27
  * @returns {PageVisibility} Page visibility information
26
28
  * - `isVisible` - True if page is currently visible to the user
27
29
  * - `visibilityState` - Current visibility state: 'visible' | 'hidden'
@@ -22,6 +22,8 @@ type PageVisibility = {
22
22
  *
23
23
  * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
24
24
  *
25
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
26
+ *
25
27
  * @returns {PageVisibility} Page visibility information
26
28
  * - `isVisible` - True if page is currently visible to the user
27
29
  * - `visibilityState` - Current visibility state: 'visible' | 'hidden'
@@ -10,6 +10,8 @@ import { useEffect, useState } from "react";
10
10
  *
11
11
  * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
12
12
  *
13
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
14
+ *
13
15
  * @returns {PageVisibility} Page visibility information
14
16
  * - `isVisible` - True if page is currently visible to the user
15
17
  * - `visibilityState` - Current visibility state: 'visible' | 'hidden'
@@ -7,7 +7,7 @@
7
7
  *
8
8
  * @template PropsList - The type of the props objects to merge.
9
9
  *
10
- * @param {PropsList} props - The props objects to merge.
10
+ * @param {...PropsList} props - The props objects to merge.
11
11
  * @returns {TupleToIntersection<PropsList>} The merged props object.
12
12
  *
13
13
  * @example