useUndoRedo

useUndoRedo.tsx

useUndoRedo

STATE_MGMT

// Manage undo/redo state for any data structure

Quick Usage

const [state, { undo, redo }] = useUndoRedo(initialState);

Features

Time Travel

History Management

Undo/Redo

When to Use

Perfect for text editors, form builders, drawing apps, or any application requiring undo/redo functionality.

Interactive Example

Current: Initial state

Complete Example

import { useUndoRedo } from '@usegrand/react-hokss';

function TextEditor() {
  const [text, { undo, redo, canUndo, canRedo }] = useUndoRedo('');

  return (
    <div>
      <textarea 
        value={text} 
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={undo} disabled={!canUndo}>
        Undo
      </button>
      <button onClick={redo} disabled={!canRedo}>
        Redo
      </button>
    </div>
  );
}

API Reference

Parameters

initialValueT

Initial value for the state

optionsObject

Configuration options (optional)

Returns

[T, Actions]

Current value and action methods

Actions.undo

Function to undo last change

Actions.redo

Function to redo last undone change

Actions.canUndo

Boolean indicating if undo is available

Actions.canRedo

Boolean indicating if redo is available

All Hooks

useCopyToClipboard