Usage

Information on the usage of the library.

Properties

The useUndoRedo Hook has 3 properties, one of them being optional, which is Key Bindings.

Properties of useUndoRedo Hook

    const [state,setState,undo,redo] = useUndoRedo(
    'Stack Size',
    'Initial State',
    'Key Bindings');

The Stack Size gets an integer equal to the desired size of both the undo and redo stack sizes.

The Initial State gets the initial version of the variable that undo and redo functions going to be used on. It can be anything from a simple string or an integer to a JavaScript object or a JSON object.

The Key Bindings gets an object with the following properties

Key Bindings

{ bindUndoKey: true, bindRedoKey: true, undoKeys: [], redoKeys: [] }

The bindUndoKey and bindRedoKey properties get boolean values corresponding to the fact that whether any key bindings are going to be used or not, by both the undo and redo getting seperate boolean values.

Use Case

A simple use case can be given, such as a Todo App that contains todo items, at which undo and redo functions can be applied on.

Sample Use Case with Todos

import React from 'react';
import {useUndoRedo} from 'undo-redo';
import {FormTodo,addTodo,markTodo,removeTodo} from '...';

export default function App() {

  const [todos,setTodos,undo,redo] = useUndoRedo(20,[
    {
      text: "This is a sample todo",
      isDone: false
    }
  ], { bindUndoKey: true, bindRedoKey: true, undoKeys: ['z'], redoKeys: ['y'] });

  return (
    <div>
      <h1>Todo List</h1>
      <FormTodo addTodo={addTodo} />
      {todos.map((todo, index) => (
                <Todo
                key={index}
                index={index}
                todo={todo}
                markTodo={markTodo}
                removeTodo={removeTodo}
                />
          ))}
    </div>
    <Button onClick={undo} >Undo</Button>
    <Button onClick={redo} >Redo</Button>
  );
}

The properties of useUndoRedo are initialized as each the undo and redo stacks having a size of 20, the initial state being a JavaScript Object that contains the properties of a todo instance and two keybinds, one for each undo and redo functions being 'z' and 'y' buttons in order.

The undo and redo functions were used with event listeners. Whenever the buttons at which the undo and redo functions was assigned to the onClick of the given button component is clicked, the undo/redo triggers, changing the state of the desired variable to the latest state on the undo/redo stack.