useManualRefHistory

Demo

Count: 0

History (limited to 10 records for demo)

2026-03-21 13:56:47{ value: 0 }

Usage

import { useManualRefHistory
import { shallowRef

const counter = shallowRef(0)
const { history, commit, undo, redo } = useManualRefHistory(counter)

counter.value += 1
commit()

console.log(history.value)

You can use undo to reset the ref value to the last history point.

console.log(counter.value) // 1
undo()
console.log(counter.value) // 0

import { useManualRefHistory
import { ref

const counter = ref({ foo: 1, bar: 2 })
const { history, commit, undo, redo } = useManualRefHistory(counter, { clone: true })

counter.value.foo += 1
commit()

Custom Clone Function

To use a full featured or custom clone function, you can set up via the clone options.

For example, using structuredClone:

import { useManualRefHistory

const refHistory = useManualRefHistory(target, { clone: structuredClone })

Or by using lodash's cloneDeep:

import { useManualRefHistory
import { cloneDeep

const refHistory = useManualRefHistory(target, { clone: cloneDeep })

Or a more lightweight klona:

import { useManualRefHistory
import { klona

const refHistory = useManualRefHistory(target, { clone: klona })

Custom Dump and Parse Function

Instead of using the clone options, you can pass custom functions to control the serialization and parsing. In case you do not need history values to be objects, this can save an extra clone when undoing. It is also useful in case you want to have the snapshots already stringified to be saved to local storage for example.

import { useManualRefHistory

const refHistory = useManualRefHistory(target, {
  dump: JSON.stringify,
  parse: JSON.parse,
})

History Capacity

We will keep all the history by default (unlimited) until you explicitly clear them up, you can set the maximal amount of history to be kept by capacity options.

import { useManualRefHistory

const refHistory = useManualRefHistory(target, {
  capacity: 15, // limit to 15 history records
})

refHistory.clear() // explicitly clear all the history

Type Declarations

Show Type Declarations

export interface UseRefHistoryRecord<T> {
  snapshot: T
  timestamp: number
}
export interface UseManualRefHistoryOptions<Raw, Serialized = Raw> {  capacity?: number  clone?: boolean | CloneFn<Raw>  dump?: (v: Raw) => Serialized  parse?: (v: Serialized) => Raw  setSource?: (source: Ref<Raw>, v: Raw) => void
}
export interface UseManualRefHistoryReturn<Raw, Serialized> {  source: Ref<Raw>  history: Ref<UseRefHistoryRecord<Serialized>[]>  last: Ref<UseRefHistoryRecord<Serialized>>  undoStack: Ref<UseRefHistoryRecord<Serialized>[]>  redoStack: Ref<UseRefHistoryRecord<Serialized>[]>  canUndo: ComputedRef<boolean>  canRedo: ComputedRef<boolean>  undo: () => void  redo: () => void  clear: () => void  commit: () => void  reset: () => voidexport declare function useManualRefHistory<Raw, Serialized = Raw>(
  source: Ref<Raw>,
  options?: UseManualRefHistoryOptions<Raw, Serialized>,
): UseManualRefHistoryReturn<Raw, Serialized>