`useUndoRedo`

A state container that keeps a bounded history of past and future values. Calling set clears the redo stack — standard text-editor behaviour.


import { useUndoRedo } from '@wire-ui/react'
 
function TextEditor() {
  const { value, set, undo, redo, canUndo, canRedo } = useUndoRedo('', { limit: 100 })
 
  return (
    <>
      <textarea value={value} onChange={(e) => set(e.target.value)} />
      <button onClick={undo} disabled={!canUndo}>Undo</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
    </>
  )
}

Parameters

Param	Type	Description
`initialValue`	`T`	Starting value.
`options`	`{ limit?: number }`	Max past entries retained. Defaults to `100`. Pass `Infinity` for unbounded history.

Returns

Key	Type	Description
`value`	`T`	Current value.
`set`	`(next: T \| ((prev: T) => T)) => void`	Push a new value; clears the redo stack.
`undo`	`() => void`	Step back. No-op if there is nothing to undo.
`redo`	`() => void`	Step forward. No-op if there is nothing to redo.
`reset`	`(next?: T) => void`	Clear history and replace the current value (defaults to the initial).
`clear`	`() => void`	Clear history but keep the current value.
`canUndo`	`boolean`	`true` if the past stack is non-empty.
`canRedo`	`boolean`	`true` if the future stack is non-empty.
`pastSize`	`number`	Size of the undo stack.
`futureSize`	`number`	Size of the redo stack.