useGraphHistoryStack()

function useGraphHistoryStack(): GraphHistoryStack;

Returns the reactive GraphHistoryStack of the surrounding <Diagram history> — the live undo/redo counts and the canUndo / canRedo flags you bind to toolbar buttons.

The component re-renders whenever the command stacks change: a new command is recorded, or the user undoes, redoes, or resets the history. Pair it with useGraphHistory to also trigger those actions.

Returns

The stack status (always present).

canRedo

readonly canRedo: boolean;

Whether there are commands to redo.

---

canUndo

readonly canUndo: boolean;

Whether there are commands to undo.

---

redoCount

readonly redoCount: number;

Number of commands in the redo stack.

---

undoCount

readonly undoCount: number;

Number of commands in the undo stack.

Throws

When the surrounding <Diagram> does not enable history.

Example

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

// Mount inside a <Diagram history> to read and drive the command stacks.
function HistoryToolbar() {
  const { undo, redo } = useGraphHistory();
  const { canUndo, canRedo, undoCount } = useGraphHistoryStack();
  return (
    <>
      <button onClick={undo} disabled={!canUndo}>Undo ({undoCount})</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
    </>
  );
}