use-undo
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    ♻️ use-undo

    undo/redo functionality with React Hooks.

    screensho

    Installation

    yarn add use-undo

    Usage

    Edit use-undo-demo

    import React from 'react';
    import ReactDOM from 'react-dom';
    import useUndo from 'use-undo';
    
    const App = () => {
      const [
        countState,
        {
          set: setCount,
          reset: resetCount,
          undo: undoCount,
          redo: redoCount,
          canUndo,
          canRedo,
        },
      ] = useUndo(0);
      const { present: presentCount } = countState;
    
      return (
        <div>
          <p>You clicked {presentCount} times</p>
          <button key="increment" onClick={() => setCount(presentCount + 1)}>
            +
          </button>
          <button key="decrement" onClick={() => setCount(presentCount - 1)}>
            -
          </button>
          <button key="undo" onClick={undoCount} disabled={!canUndo}>
            undo
          </button>
          <button key="redo" onClick={redoCount} disabled={!canRedo}>
            redo
          </button>
          <button key="reset" onClick={() => resetCount(0)}>
            reset to 0
          </button>
        </div>
      );
    };

    API

    useUndo

    const [state, actions] = useUndo(initialState);

    state

    Type: Object
    Key Type Description
    past Array The undo stack.
    present Any The present state.
    future Array The redo stack.

    actions

    Type: Object
    Key Type Description
    set function Assign a new value to present.
    reset function Clear past array and future array. Assign a new value to present.
    undo function See handling-undo.
    redo function See handling-redo.
    canUndo boolean Check whether state.undo.length is 0.
    canRedo boolean Check whether state.redo.length is 0.

    How does it work?

    Refer to Redux Implementing Undo History, use-undo implements the same concect with useReducer.
    The state structure looks like:

    {
      past: Array<T>,
      present: <T>,
      future: Array<T>
    }

    It stores all states we need. To operate on this state, there are three functions in actions (set, undo and redo) that dispatch defined types and necessary value.

    Related repo

    License

    MIT © homerchen19

    Keywords

    none

    Install

    npm i use-undo

    DownloadsWeekly Downloads

    2,191

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • xxhomey19