useTimeline
An enchanced useState hook which keeps track of the states history, allowing you to undo and redo states.
useTimeline is a simple hook based on the useState hook which abstracts operations of undo and redo.
A full example is avaiable on here.
Install
With npm:
npm install @mr96/use-timeline
With yarn:
yarn add @mr96/use-timeline
Quick Start
import { useTimeline } from '@mr96/useTimeline';
export default function App() {
const {
// current state
state,
// set a new state (same API as setState)
setState,
// undo by 1 step
undo,
// redo by 1 step
redo,
// true if there is an undoable state
canUndo,
// true if there is a redoable state
canRedo,
...additionalProps
} = useTimeline('');
const onChange = (event: ChangeEvent<HTMLInputElement>) => {
setState(event.target.value);
};
return (
<button disabled={!canUndo} onClick={() => undo()}>
Undo
</button>
<input type="text" onChange={onChange} value={state} />
<button disabled={!canRedo} onClick={() => redo()}>
Redo
</button>
)
}
10.8k Dec 26, 2022
5 Oct 17, 2022
7 Dec 20, 2022
2 May 2, 2022
5 Oct 9, 2022
23 Aug 6, 2022
6 Nov 20, 2022
21 Nov 24, 2022
9.7k Jan 3, 2023
4 Oct 14, 2022