useGraphHistory()

function useGraphHistory(): GraphHistoryApi;

Returns the imperative GraphHistoryApi owned by the surrounding <Diagram history> — call undo, redo, or resetHistory to drive the undo/redo command stack from buttons, menus, or keyboard shortcuts.

The returned handle is stable, so reading it never re-renders the component when the stacks change. Reach for useGraphHistoryStack when you need reactive undo/redo state (for example, to disable a button when there is nothing left to undo).

Returns

The graph history handle (always present).

commandManager

readonly commandManager: CommandManager;

The underlying dia.CommandManager instance.

---

redo

readonly redo: () => void;

Redo the last undone command, moving it back onto the undo stack.

Returns

void

---

resetHistory

readonly resetHistory: () => void;

Clear both the undo and redo stacks, discarding all recorded history.

Returns

void

---

undo

readonly undo: () => void;

Undo the last recorded command, moving it onto the redo stack.

Returns

void

Throws

When the surrounding <Diagram> does not enable history.

Example

import { useGraphHistory } from '@joint/react-plus';

// Mount inside a <Diagram history> to drive the undo/redo command stack.
function HistoryButtons() {
  const { undo, redo } = useGraphHistory();
  return (
    <>
      <button onClick={undo}>Undo</button>
      <button onClick={redo}>Redo</button>
    </>
  );
}