UseHistory

import { useHistory } from "@hookraft/usehistory"

const { state, set, undo, redo, canUndo, canRedo } = useHistory("", {
  limit: 50,
  onUndo: (state) => console.log("Undid to:", state),
  onRedo: (state) => console.log("Redid to:", state),
  onChange: (state) => console.log("Changed to:", state),
})

function TextEditor() {
  const { state, set, undo, redo, canUndo, canRedo, clear, history, jump } = useHistory("", {
    limit: 100,
    onUndo: (value) => console.log("Undid to:", value),
    onChange: () => console.log("Changed!"),
  })

  return (
    <div>
      <textarea
        value={state}
        onChange={(e) => set(e.target.value)}
        placeholder="Start typing..."
      />

      <div>
        <button onClick={undo} disabled={!canUndo}>Undo</button>
        <button onClick={redo} disabled={!canRedo}>Redo</button>
        <button onClick={clear}>Clear</button>
      </div>

      {/* History timeline — click any entry to jump to it */}
      {history.length > 0 && (
        <ul>
          {history.map((entry, index) => (
            <li key={index}>
              <button onClick={() => jump(index)}>
                {entry || "(empty)"}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}