@mr96/use-timeline

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>
  )
}