simple-undo-redo/src/react-hook.js

Simple undo-redo functionality with branching support for JavaScript applications

const UndoRedoJS = require('./UndoRedoJS.js');

// Simple React hook for undo-redo
const useUndoRedo = (initialData = {}, options = {}) => {
  // Check if React exists
  if (typeof React === 'undefined' || !React.useState) {
    console.warn('React not found');
    return { undoRedo: new UndoRedoJS(initialData, options) };
  }
  
  // Create instance once
  const [undoRedo] = React.useState(() => {
    return new UndoRedoJS(initialData, options);
  });
  
  // Current data state
  const [data, setData] = React.useState(() => {
    return undoRedo.getCurrentData();
  });
  
  // Can undo/redo states
  const [canUndo, setCanUndo] = React.useState(() => {
    return undoRedo.canUndo();
  });
  
  const [canRedo, setCanRedo] = React.useState(() => {
    return undoRedo.canRedo();
  });
  
  // Update all React states
  const updateStates = () => {
    setData(undoRedo.getCurrentData());
    setCanUndo(undoRedo.canUndo());
    setCanRedo(undoRedo.canRedo());
  };
  
  // Update data
  const updateData = (newData, message) => {
    undoRedo.update(newData, message);
    updateStates();
  };
  
  // Undo
  const undo = () => {
    undoRedo.undo();
    updateStates();
  };
  
  // Redo
  const redo = () => {
    undoRedo.redo();
    updateStates();
  };
  
  // Clear
  const clear = () => {
    undoRedo.clear();
    updateStates();
  };
  
  return {
    data,
    updateData,
    undo,
    redo,
    clear,
    canUndo,
    canRedo,
    undoRedo
  };
};

module.exports = { useUndoRedo };