🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

react-undo-redo-state

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version
1.10.4
 to
1.10.5
+1
-1
package.json
{
"name": "react-undo-redo-state",
"version": "1.10.4",
"version": "1.10.5",
"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",

+35
-19
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
```

@@ -33,6 +33,14 @@

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 [
count,
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>

@@ -55,17 +63,20 @@ </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 array with six elements:
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 +93,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.