react-undoable 🔄
Easily undo/redo any state in React, no redux required.
Installation
$ yarn add react-undoable
TypeScript
This library utilizes TypeScript and exposes a full set of TypeScript definitions.
Usage
This library exposes a default Undoable
component that is used to manage the state you wish to undo/redo. This component wraps any number of child components and provides a simple API to manage the state.
Example
/** * Props */ /** * State */ // Define initial state /** * Sample undoable component * * Allows us to add and subtract numbers. Simple, but shows off the functionality * * **Important:** This component does not define it's own state. Instead, we defer state * management to the `Undoable` component. Optionally, we can define our supposed state * using TypeScript for easier management. */ /** * In our main application (or anywhere), we can wrap MyComponent in Undoable * to give it undo/redo functionality */
API
react-undoable exposes a small API to use in your child components.
<Undoable />
Initializes the main Undoable component that manages state. Renders a child function that passed the different state trees and methods to manage state.
Props
Methods
The Undoable component passes down the following methods in the child function.
pushState(state: T): void
Pushes a new state to the stack. This tracks the change so it can be undone or redone.
updateState(state: T): void
Update the state but do not track the change. This is useful for when you want to update the state but do not want undo/redo to apply the previous change (e.g. highlighting a selected layer)
undo(): void
Undo the current state and replace with the previously tracked state.
redo(): void
Redo a previous undone state.
resetState(): void
Reset the state stack so there are no undos/redos.
Use Cases
Astral TableTop allows Game Masters to build feature-rich dungeons and maps using a "Map Builder", a feature which resembles many familiar photo editing interfaces and contains basic functionality such as undo/redo for editing actions. This library allows developers to create undo/redo functionality for any React Component with minimal overhead.
We open-sourced this library in hopes that other projects might find it useful 💙
License
MIT