A library to add undo-redo to any reducer
npm install react-undo-redoA utility to add undo and redo functionality to any state managed through a reducer.
This library does not require redux.
If you're looking for something that adds undo and redo to a state that is managed through redux you might be in the wrong place.
Through yarn.
``sh`
yarn add react-undo-redo
Through npm
`sh`
npm install --save react-undo-redo
In order to create the provider and hooks to manage undo and redo you call createUndoRedo and pass the reducer you'd like to enhance.reducer
This method returns a provider component and hooks to work with your state.
The you pass does not need any knowledge about this feature.
`js
import { createUndoRedo } from "react-undo-redo"
const { UndoRedoProvider, usePast, usePresent, useFuture, useUndoRedo } =
createUndoRedo(reducer)
`
createUndoRedo also accepts an options object as a second parameter. Currently available options:
- track - function with signature (action) => boolean. It is invoked on every dispatch and defines whether the new state is avaiable for undo/redo. If function returns false, the state won't affect the change history. It is useful in situations, when the change is not reflected in the UI or the user cannot control over.
`js
import { createUndoRedo } from "react-undo-redo"
const { UndoRedoProvider, usePast, usePresent, useFuture, useUndoRedo } =
createUndoRedo(reducer, {track: (action) => action.type !== 'GET_NEW_TODOS'})
`
| Prop | Required | Description |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------- |
| initialState | ✔️ | The initial state that your reducer needs. This does not need any notion of past, present, or future. |past
| | | If you like to restore a prior session you can pass an earlier version of past states here. |future
| | | If you like to restore a prior session you can pass an earlier version of future states here. |
`js`
function Component() {
return (
)
}
The return value of this hook mimics the useReducer hook.
You get access to the current present state.
Use the dispatch method to dispatch any of your actions.
`js
function Component() {
const [count, dispatch] = usePresent()
return (
<>
)
}
`
Returns a tuple that contains methods to signal undo or redo.react-undo-redo
If you call the two methods updates the current present state.
Important: You can also call undo or redo when there is nothing to undo or redo.isPossible
However, you can check whether there is anything to undo or redo by checking the prop that is present on both methods.
`js
function Component() {
const [undo, redo] = useUndoRedo()
return (
<>
)
}
``
Returns all current past states (i.e. state snapshots when actions are dispatched).
You probably don't need to use this.
Returns all current future states (i.e. states that have been undone).
You probably don't need to use this.