An enchanced useState hook which keeps track of the states history, allowing you to undo and redo states

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

GitHub

View Github