react-undo-redo-state - npm Package Compare versions

Comparing version 1.9.3 to 1.10.3

lib/hooks/useUndoRedoState.d.ts

@@ -0,1 +1,33 @@
+type UndoRedoOptions = {
+    maxStackSize?: number;
+    onUndo?: () => void;
+    onRedo?: () => void;
+};
+type UseUndoRedoStateReturn<T> = {
+    /**
+     * The current state value.
+     */
+    state: T;
+    /**
+     * Updates the state with a new value and adds the previous state to the undo stack.
+     * @param {T} newValue - The new state value.
+     */
+    setValue: (newValue: T) => void;
+    /**
+     * Reverts the state to the previous value in the undo stack.
+     */
+    undo: () => void;
+    /**
+     * Applies the next value from the redo stack to the state.
+     */
+    redo: () => void;
+    /**
+     * Resets the state to the initial state value.
+     */
+    resetState: () => void;
+    /**
+     * Clears both the undo and redo stacks.
+     */
+    clearHistory: () => void;
+};
 /**
@@ -6,13 +38,6 @@ * A custom React hook that provides undo and redo functionality for state management.
  * @param {T} initialState - The initial state value.
- * @param {Object} options - An object containing configuration options.
- * @param {number} [options.maxStackSize=DEFULT_MAX_STACK_SIZE] - The maximum size of the undo and redo stacks.
- * @param {Function} [options.onUndo] - A callback function to be called after an undo operation.
- * @param {Function} [options.onRedo] - A callback function to be called after a redo operation.
- * @returns {[T, (newValue: T) => void]} An array containing the current state value and a function to set a new state value.
+ * @param {UndoRedoOptions} [options] - An object containing configuration options.
+ * @returns {UseUndoRedoStateReturn<T>} An object containing the current state value, a function to set a new state value, an undo function, a redo function, a reset function, and a clear history function.
  */
-declare const useUndoRedoState: <T>(initialState: T, options?: {
-    maxStackSize?: number;
-    onUndo?: () => void;
-    onRedo?: () => void;
-}) => [T, (newValue: T) => void];
+declare const useUndoRedoState: <T>(initialState: T, options?: UndoRedoOptions) => UseUndoRedoStateReturn<T>;
 export default useUndoRedoState;

lib/hooks/useUndoRedoState.js

@@ -13,3 +13,3 @@ "use strict";
 var react_1 = require("react");
-var DEFULT_MAX_STACK_SIZE = 10;
+var DEFAULT_MAX_STACK_SIZE = 10;
 /**
@@ -20,17 +20,12 @@ * A custom React hook that provides undo and redo functionality for state management.
  * @param {T} initialState - The initial state value.
- * @param {Object} options - An object containing configuration options.
- * @param {number} [options.maxStackSize=DEFULT_MAX_STACK_SIZE] - The maximum size of the undo and redo stacks.
- * @param {Function} [options.onUndo] - A callback function to be called after an undo operation.
- * @param {Function} [options.onRedo] - A callback function to be called after a redo operation.
- * @returns {[T, (newValue: T) => void]} An array containing the current state value and a function to set a new state value.
+ * @param {UndoRedoOptions} [options] - An object containing configuration options.
+ * @returns {UseUndoRedoStateReturn<T>} An object containing the current state value, a function to set a new state value, an undo function, a redo function, a reset function, and a clear history function.
  */
 var useUndoRedoState = function (initialState, options) {
+    if (options === void 0) { options = {}; }
     var _a = (0, react_1.useState)(initialState), state = _a[0], setState = _a[1];
     var _b = (0, react_1.useState)([initialState]), undoStack = _b[0], setUndoStack = _b[1];
     var _c = (0, react_1.useState)([]), redoStack = _c[0], setRedoStack = _c[1];
-    var _d = options || {}, _e = _d.maxStackSize, maxStackSize = _e === void 0 ? DEFULT_MAX_STACK_SIZE : _e, _f = _d.onUndo, onUndo = _f === void 0 ? function () { } : _f, _g = _d.onRedo, onRedo = _g === void 0 ? function () { } : _g;
-    /**
-     * Handles the undo operation by reverting the state to the previous value in the undo stack.
-     */
-    var handleUndo = (0, react_1.useCallback)(function () {
+    var _d = options.maxStackSize, maxStackSize = _d === void 0 ? DEFAULT_MAX_STACK_SIZE : _d, _e = options.onUndo, onUndo = _e === void 0 ? function () { } : _e, _f = options.onRedo, onRedo = _f === void 0 ? function () { } : _f;
+    var undo = (0, react_1.useCallback)(function () {
         if (undoStack.length > 1) {
@@ -46,7 +41,4 @@ var newUndoStack = __spreadArray([], undoStack, true);
         }
-    }, [undoStack, redoStack, state]);
-    /**
-     * Handles the redo operation by applying the next value from the redo stack.
-     */
-    var handleRedo = (0, react_1.useCallback)(function () {
+    }, [undoStack, redoStack, state, onUndo]);
+    var redo = (0, react_1.useCallback)(function () {
         if (redoStack.length > 0) {
@@ -56,3 +48,9 @@ var newRedoStack = __spreadArray([], redoStack, true);
             if (currentState !== undefined) {
-                setUndoStack(__spreadArray(__spreadArray([], undoStack, true), [state], false));
+                setUndoStack(function (prevUndoStack) {
+                    var newUndoStack = __spreadArray(__spreadArray([], prevUndoStack, true), [state], false);
+                    if (newUndoStack.length > maxStackSize) {
+                        newUndoStack.shift();
+                    }
+                    return newUndoStack;
+                });
                 setState(currentState);
@@ -63,27 +61,31 @@ setRedoStack(newRedoStack);
         }
-    }, [undoStack, redoStack, state]);
-    /**
-     * Updates the state with a new value and adds the previous state to the undo stack.
-     * @param {T} newValue - The new state value.
-     */
+    }, [redoStack, state, maxStackSize, onRedo]);
     var setValue = (0, react_1.useCallback)(function (newValue) {
-        var newUndoStack = __spreadArray(__spreadArray([], undoStack, true), [state], false);
-        if (newUndoStack.length > maxStackSize) {
-            newUndoStack.shift();
-        }
+        setUndoStack(function (prevUndoStack) {
+            var newUndoStack = __spreadArray(__spreadArray([], prevUndoStack, true), [state], false);
+            if (newUndoStack.length > maxStackSize) {
+                newUndoStack.shift();
+            }
+            return newUndoStack;
+        });
         setState(newValue);
-        setUndoStack(newUndoStack);
         setRedoStack([]);
-    }, [undoStack, state, maxStackSize]);
-    /**
-     * Sets up event listeners for keyboard shortcuts (Cmd+Z for undo, Cmd+Shift+Z for redo).
-     */
+    }, [state, maxStackSize]);
+    var resetState = (0, react_1.useCallback)(function () {
+        setState(initialState);
+        setUndoStack([initialState]);
+        setRedoStack([]);
+    }, [initialState]);
+    var clearHistory = (0, react_1.useCallback)(function () {
+        setUndoStack([state]);
+        setRedoStack([]);
+    }, [state]);
     (0, react_1.useEffect)(function () {
         var handleKeyDown = function (event) {
-            if (event.metaKey) {
+            if (event.metaKey || event.ctrlKey) {
                 if (event.key === "z" && !event.shiftKey) {
-                    handleUndo();
+                    undo();
                 }
                 else if (event.key === "z" && event.shiftKey) {
-                    handleRedo();
+                    redo();
                 }
@@ -96,5 +98,5 @@ }
         };
-    }, [handleUndo, handleRedo]);
-    return [state, setValue];
+    }, [undo, redo]);
+    return { state: state, setValue: setValue, undo: undo, redo: redo, resetState: resetState, clearHistory: clearHistory };
 };
 exports.default = useUndoRedoState;

package.json

 {
   "name": "react-undo-redo-state",
-  "version": "1.9.3",
+  "version": "1.10.3",
   "description": "Effortlessly enable undo and redo capabilities in your React applications with this powerful custom hook. 'useUndoRedoState' empowers users with intuitive keyboard shortcuts and programmatic control, allowing them to revert or reapply state changes seamlessly. Unlock a delightful user experience with a single line of code.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -8,5 +8,7 @@ # useUndoRedoState
 - **Keyboard Shortcuts**: The hook automatically sets up event listeners for keyboard shortcuts (`Cmd+Z` for undo and `Cmd+Shift+Z` for redo on macOS, or `Ctrl+Z` and `Ctrl+Shift+Z` on other platforms).
-- **Programmatic Control**: In addition to keyboard shortcuts, you can control undo and redo operations programmatically by calling the provided `handleUndo` and `handleRedo` functions.
+- **Programmatic Control**: In addition to keyboard shortcuts, you can control undo and redo operations programmatically by calling the provided `undo` and `redo` functions.
 - **Customizable Stack Size**: You can customize the maximum size of the undo and redo stacks to control memory usage.
 - **Callback Functions**: The hook supports optional callback functions that are called after undo or redo operations, allowing you to perform additional actions or side effects.
+- **Reset State**: Provides a function to reset the state to its initial value.
+- **Clear History**: Provides a function to clear both the undo and redo stacks.
 
@@ -19,3 +21,2 @@ ## Installation
 npm install react-undo-redo-state
-
 ```
@@ -25,3 +26,2 @@
 yarn add react-undo-redo-state
-
 ```
@@ -31,8 +31,16 @@
 
-```jsx
+```tsx
 import React from 'react';
-import { useUndoRedoState } from "react-undo-redo-state";
+import useUndoRedoState from 'react-undo-redo-state';
 
 export default function CounterApp() {
-  const [count, setCount] = useUndoRedoState(0);
+  const {
+    state: count,
+    setValue: setCount,
+    undo,
+    redo,
+    resetState,
+    clearHistory
+  } = useUndoRedoState(0);
+
   return (
@@ -43,8 +51,8 @@ <div className="w-full h-screen mt-20">
         <div className="flex items-center gap-5">
-          <Button variant={"outline"} onClick={() => setCount(count - 1)}>
-            - Decrement
-          </Button>
-          <Button variant={"outline"} onClick={() => setCount(count + 1)}>
-            + Increment
-          </Button>
+          <button onClick={() => setCount(count - 1)}>Decrement</button>
+          <button onClick={() => setCount(count + 1)}>Increment</button>
+          <button onClick={undo}>Undo</button>
+          <button onClick={redo}>Redo</button>
+          <button onClick={resetState}>Reset</button>
+          <button onClick={clearHistory}>Clear History</button>
         </div>
@@ -58,14 +66,18 @@ </div>
 
-The `useUndoRedoState` hook accepts two arguments:
+The useUndoRedoState hook accepts two arguments:
 
 1. `initialState`: The initial state value.
 2. `options` (optional): An object containing configuration options:
-    - `maxStackSize`: The maximum size of the undo and redo stacks (default: 10).
-    - `onUndo`: A callback function to be called after an undo operation.
-    - `onRedo`: A callback function to be called after a redo operation.
+ - 1. `maxStackSize`: The maximum size of the undo and redo stacks (default: 10).
+ - 2. `onUndo`: A callback function to be called after an undo operation.
+ - 3. `onRedo`: A callback function to be called after a redo operation.
 
-The hook returns an array with two elements:
+The hook returns an object with the following properties:
 
 1. `state`: The current state value.
-2. `setState`: A function to set a new state value. This function automatically adds the previous state to the undo stack, enabling undo operations.
+2. `setValue`: A function to set a new state value. This function automatically adds the previous state to the undo stack, enabling undo operations.
+3. `undo`: A function to revert the state to the previous value in the undo stack.
+4. `redo`: A function to apply the next value from the redo stack to the state.
+5. `resetState`: A function to reset the state to the initial value.
+6. `clearHistory`: A function to clear both the undo and redo stacks.
 
@@ -82,2 +94,7 @@ ## Demo
 
-This project is licensed under the MIT License.
+This project is licensed under the MIT License.
+
+### Summary of Changes:
+1. **Updated Features Section:** Added details for the new `resetState` and `clearHistory` functions.
+2. **Usage Example:** Updated the usage example to show the use of the new functions and the renamed `setValue` function.
+3. **Return Object Documentation:** Updated the documentation to reflect returning an object instead of a tuple.

No alert changes

Improved metrics

Total package byte prevSize

11723

16.01%

Lines of code

147

22.5%

Number of lines in readme file

93

22.37%

No dependency changes