# react-useundoredostate-hook

> A lightweight module to store historical state and allow undo/redo

Latest version **1.2.3** (published 2023-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-useundoredostate-hook
pnpm add react-useundoredostate-hook
yarn add react-useundoredostate-hook
bun add react-useundoredostate-hook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2023-12-11 |
| First published | 2023-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Amreesh Tyagi |
| Maintainers | amreesh |
| Keywords | undo hook, react hook, undo state, history state |

## Links

- npm: https://www.npmjs.com/package/react-useundoredostate-hook
- Repository: https://github.com/AmreeshTyagi/react-useUndoRedoState-hook
- Homepage: https://github.com/AmreeshTyagi/react-useUndoRedoState-hook.git#readme
- Issues: https://github.com/AmreeshTyagi/react-useUndoRedoState-hook.git/issues
- npm.io page: https://npm.io/package/react-useundoredostate-hook

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.23.5

## Recent versions

- 1.2.3 (latest) — 2023-12-11
- 1.2.2 — 2023-12-11
- 1.2.1 — 2023-12-11
- 1.2.0 — 2023-12-11
- 1.1.0 — 2023-12-11

## README

# React useUndoableState Hook

A lightweight module to store historical state and allow undo/redo, including multiple steps backward or forward.

## Installation

```
npm install --save react-useundoredostate-hook
```

The following packages are peer dependencies and must be installed for this package to work.

```
react
lodash
```

## Usage Example

Here's a code sandbox for how this hook is used: https://codesandbox.io/s/use-undoable-state-2spts

```js
import React from "react";
import useUndoRedoState from "react-useundoredostate-hook";

export default function Document() {
  const {
    state: doc,
    setState: setDoc,
    resetState: resetDoc,
    index: docStateIndex,
    lastIndex: docStateLastIndex,
    goBack: undoDoc,
    goForward: redoDoc,
  } = useUndoRedoState(
    { text: "The quick brown fox jumps over the lazy dog" }, // initial value
    500 // debounce timeout before states gets updated (optional - defaults to 500)
  );

  const canUndo = docStateIndex > 0;
  const canRedo = docStateIndex < docStateLastIndex;

  return ...
}
```

## Concept

As with useState, useUndoRedoState accepts only 1 argument, the initial value. Behind the scenes, the hook uses two main variables to determine state - `index` (number) and `states` (array). `states` stores the historical values of the state while `index` determines current state by indicating the current position in the array. `states` is only written to after a debounced period of `debouncePeriod` (passed as second param of hook, defaults to 500).

You may navigate through historical states by using the `goBack` and `goForward` functions emitted by the hook. However, if you make a call to `setState` and `index` is not at the end of the `states` array, all states after `index` is erased and `index` will go back to the end of the `states` array.

The following table attempts to provide a more detailed explanation of the object returned by the hook:

| Prop       | Type                      | Usage             | Description                                                           |
| ---------- | ------------------------- | ----------------- | --------------------------------------------------------------------- |
| state      | `T: any`                  |                   | Current state, initialised with argument passed                       |
| setState   | `(value: T) => void`      | setState(value)   | Sets state to value. All values after current `index` is erased       |
| resetState | `(init: T) => void`       | resetState(value) | Deletes historical states and resets to value                         |
| index      | `number`                  |                   | The current index in the `states` array                               |
| lastIndex  | `number`                  |                   | The last index in the `states` array. To determine if can `goForward` |
| goBack     | `(steps: number) => void` | goBack(2)         | Goes back the number of steps passed                                  |
| goForward  | `(steps: number) => void` | goForward(3)      | Goes forward the number of steps passed                               |


## Thanks to original author 
* https://github.com/jzcling/react-use-undoable-state
* Since original version is not supporting React 18, so I forked it and modified it to support React 18.

---
_Source: https://npm.io/package/react-useundoredostate-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._