Skip to content

Commit

Permalink
fix(update): fix update value
Browse files Browse the repository at this point in the history
  • Loading branch information
unadlib committed Mar 21, 2024
1 parent 6a1f46f commit 165a551
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 8 deletions.
14 changes: 8 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,30 +31,33 @@ yarn add use-travel mutative

You can use `useTravel` to create a time travel state. And it returns a tuple with the current state, the state setter, and the controls. The controls include `back`, `forward`, `reset`, `canUndo`, `canRedo`, `getHistory`, `patches`, `position`, and `go`.

```tsx
```jsx
import { useTravel } from 'use-travel';

const App = () => {
const [state, setState, controls] = useTravel(0, {
maxHistory: 10,
initialPatches: [],
initialPatches: {
patches: [],
inversePatches: [],
},
});
return (
<div>
<div>{state}</div>
<button onClick={() => setState(state + 1)}>Increment</button>
<button onClick={() => setState(state - 1)}>Decrement</button>
<button onClick={controls.back} disabled={!controls.canUndo()}>
<button onClick={controls.back} disabled={!controls.canBack()}>
Undo
</button>
<button onClick={controls.forward} disabled={!controls.canRedo()}>
<button onClick={controls.forward} disabled={!controls.canForward()}>
Redo
</button>
<button onClick={controls.reset}>Reset</button>
{controls.getHistory().map((state, index) => (
<div key={index}>{state}</div>
))}
{controls.patches.map((patch, index) => (
{controls.patches.patches.map((patch, index) => (
<div key={index}>{patch}</div>
))}
<div>{controls.position}</div>
Expand All @@ -70,7 +73,6 @@ const App = () => {
};
```


### Options

| Options | type | description | default |
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "use-travel",
"version": "0.2.0",
"version": "0.2.1",
"description": "A React hook for state time travel with undo, redo, and reset functionalities.",
"main": "dist/index.cjs.js",
"unpkg": "dist/index.umd.js",
Expand Down
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const useTravel = <S, F extends boolean>(
setState(nextState);
setPosition(position + 1);
setAllPatches((_allPatches) => {
const notLast = position < allPatches.patches.length;
const notLast = position < _allPatches.patches.length;
// Remove all patches after the current position
if (notLast) {
_allPatches.patches.splice(
Expand Down

0 comments on commit 165a551

Please sign in to comment.