use-good-hooks 1.0.34 → 1.0.36

package/README.md

@@ -243,8 +243,8 @@ const TextEditor = () => {
 
 - `initialState`: The initial state value
 - `options`: (Optional) Configuration options:
+    - `debounceMs`: Time in milliseconds to debounce the state changes (default: 0)
     - `debounceSettings`: Debounce settings object (default: { leading: true, trailing: false })
-    - `debounceTime`: Time in milliseconds to debounce the state changes (default: 0)
     - `immutable`: Boolean indicating if the state should be treated as immutable (default: false)
     - `maxCapacity`: Maximum number of history entries to keep (default: 10)
     - `onChange`: Function to call when the state changes
@@ -516,7 +516,7 @@ const [state, setState] = useTemporaryState('initial', 1000);
 #### Parameters
 
 - `initialState`: The initial state value
-- `timeout`: The timeout duration in milliseconds (default: 3000)
+- `ms`: The timeout duration in milliseconds (default: 3000)
 
 #### Returns
 
@@ -524,6 +524,53 @@ const [state, setState] = useTemporaryState('initial', 1000);
     - `state`: The current state
     - `setState`: Function to update state
 
+### `useLateState`
+
+Delays the update of a state value until a specified time has passed. This is useful for scenarios where you want to introduce a delay before a state change takes effect, such as showing a loading spinner for a minimum amount of time.
+
+```typescript
+import useLateState from 'use-good-hooks/use-late-state';
+
+const DelayedComponent = () => {
+  const [status, setStatus, cancelUpdate] = useLateState('Waiting...', 2000); // 2-second delay
+
+  const handleUpdate = () => {
+    setStatus('Updated!');
+  };
+
+  const handleImmediateUpdate = () => {
+    setStatus('Immediately Updated!', true);
+  };
+
+  const handleCancel = () => {
+    const wasCancelled = cancelUpdate();
+    if (wasCancelled) {
+      alert('Update cancelled!');
+    }
+  };
+
+  return (
+    <div>
+      <p>Status: {status}</p>
+      <button onClick={handleUpdate}>Update after 2s</button>
+      <button onClick={handleImmediateUpdate}>Update Immediately</button>
+      <button onClick={handleCancel}>Cancel Update</button>
+    </div>
+  );
+};
+```
+
+#### Parameters
+
+- `initial`: The initial value of the state.
+- `delay`: The delay in milliseconds before the state is updated.
+
+#### Returns
+
+- `value`: The current state value.
+- `setLate`: A function to update the state after the specified delay. It can also accept a second boolean argument to update the state immediately.
+- `cancel`: A function to cancel a pending state update.
+
 ## 🧪 Running Tests
 
 This library is thoroughly tested with Vitest and React Testing Library. To run the tests:
@@ -549,6 +596,7 @@ Each hook in this library is designed with performance in mind:
 4. `useUrlState` efficiently handles URL synchronization with debouncing
 5. `useGlobalState` and `createGlobalState` provide a way to share state across components with automatic synchronization
 6. `useTemporaryState` allows for temporary state that resets after a timeout
+7. `useLateState` provides a mechanism to delay state updates, which can be useful for managing UI transitions and asynchronous operations.
 
 ## 🛠️ Development
 

package/dist/use-debounce.d.ts

@@ -1,4 +1,4 @@
-declare const useDebounce: <T>(value: T, delay?: number) => T;
+declare const useDebounce: <T>(value: T, ms?: number) => T;
 export default useDebounce;
 
 export { }

package/dist/use-debounce.js

@@ -1,6 +1,6 @@
 import { useState as s, useRef as d, useEffect as n } from "react";
 import f from "lodash/debounce";
-const b = 300, D = (e, o = b) => {
+const b = 300, p = (e, o = b) => {
   const [u, r] = s(e), c = d(
     f((t) => {
       r(t);
@@ -16,5 +16,5 @@ const b = 300, D = (e, o = b) => {
   }, []), u;
 };
 export {
-  D as default
+  p as default
 };

package/dist/use-history-state.d.ts

@@ -35,7 +35,7 @@ declare type HistoryState<T> = {
 
 declare type UseHistoryOptionsState<T> = {
     debounceSettings?: DebounceSettings;
-    debounceTime?: number;
+    debounceMs?: number;
     immutable?: boolean;
     maxCapacity?: number;
     onChange?: HistoryOnChange<T>;

package/dist/use-history-state.js

@@ -1,13 +1,13 @@
-import { useRef as F, useReducer as H, useCallback as d } from "react";
-import J from "lodash/cloneDeep";
-import M from "lodash/isNil";
+import { useRef as M, useReducer as T, useCallback as d } from "react";
+import H from "lodash/cloneDeep";
+import J from "lodash/isNil";
 import E from "lodash/size";
 import k from "./use-debounce-fn.js";
 const q = {
   future: [],
   past: [],
   present: null
-}, l = (e, r) => r ? e : J(e), v = (e, r, y) => y ? e === r : JSON.stringify(e) === JSON.stringify(r), z = ({
+}, l = (e, r) => r ? e : H(e), v = (e, r, y) => y ? e === r : JSON.stringify(e) === JSON.stringify(r), z = ({
   action: e,
   immutable: r,
   maxCapacity: y,
@@ -77,7 +77,7 @@ const q = {
           }), w;
         }
         let u = [...n];
-        p !== null && (u = [...u, l(p, r)]), !M(y) && y > 0 && E(u) > y && (u = u.slice(E(u) - y));
+        p !== null && (u = [...u, l(p, r)]), !J(y) && y > 0 && E(u) > y && (u = u.slice(E(u) - y));
         const c = {
           future: [],
           past: u,
@@ -106,9 +106,9 @@ const q = {
     }
   }
 }, G = (e, r) => {
-  const { maxCapacity: y, debounceTime: t, debounceSettings: f, onChange: o, immutable: n } = r || {}, S = F(e), [p, s] = H(
-    (i, T) => z({
-      action: T,
+  const { maxCapacity: y, debounceMs: t, debounceSettings: f, onChange: o, immutable: n } = r || {}, S = M(e), [p, s] = T(
+    (i, F) => z({
+      action: F,
       immutable: n,
       maxCapacity: y,
       onChange: o,

package/dist/use-temporary-state.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch } from 'react';
 import { SetStateAction } from 'react';
 
-declare const useTemporaryState: <T>(initialState: T, timeout: number) => readonly [T, Dispatch<SetStateAction<T>>];
+declare const useTemporaryState: <T>(initialState: T, ms: number) => readonly [T, Dispatch<SetStateAction<T>>];
 export default useTemporaryState;
 
 export { }

package/dist/use-temporary-state.js

@@ -1,11 +1,11 @@
-import { useRef as o, useState as c, useEffect as n } from "react";
+import { useRef as s, useState as c, useEffect as n } from "react";
 const m = (e, r) => {
-  const t = o(null), [u, s] = c(e);
+  const t = s(null), [u, o] = c(e);
   return n(() => (clearTimeout(t.current), t.current = setTimeout(() => {
-    s(e);
+    o(e);
   }, r), () => {
     clearTimeout(t.current);
-  }), [e, u, r]), [u, s];
+  }), [e, u, r]), [u, o];
 };
 export {
   m as default

package/dist/use-throttle.d.ts

@@ -1,4 +1,4 @@
-declare const useThrottle: <T>(value: T, delay?: number) => T;
+declare const useThrottle: <T>(value: T, ms?: number) => T;
 export default useThrottle;
 
 export { }

package/package.json

@@ -50,5 +50,5 @@
 		"test:coverage": "vitest --coverage --run",
 		"test:watch": "vitest"
 	},
-	"version": "1.0.34"
+	"version": "1.0.36"
 }