React API

`useTimeTravel<T>(initialValue, options?)`

A React hook that wraps the core timeTravel instance and provides a reactive state property that triggers re-renders.

import { useTimeTravel } from "@biswaviraj/time-travel/react";

const { state, add, undo, redo, canUndo, canRedo } = useTimeTravel(0);

See the Getting Started page for a full component example, or the Examples page for more patterns.

Parameters

Parameter	Type	Description
`initialValue`	`T`	The initial state value
`options.limit`	`number`	Max past/future states to keep (default: `10`)

Returns

UseTimeTravel<T> — all core API methods and properties, plus:

Property	Type	Description
`state`	`T`	Reactive current value — triggers re-render on change

The hook uses useSyncExternalStore under the hood, so it’s compatible with concurrent features and server-side rendering.

Usage Patterns

With Objects

type FormData = { name: string; email: string };

function Form() {
  const { state, add, undo, canUndo } = useTimeTravel<FormData>({
    name: "",
    email: "",
  });

  const update = (field: keyof FormData, value: string) => {
    add({ ...state, [field]: value });
  };

  return (
    <form>
      <input
        value={state.name}
        onChange={(e) => update("name", e.target.value)}
      />
      <input
        value={state.email}
        onChange={(e) => update("email", e.target.value)}
      />
      <button type="button" onClick={() => undo()} disabled={!canUndo}>
        Undo
      </button>
    </form>
  );
}

With History Limit

const { state, add } = useTimeTravel(0, { limit: 50 });

Types

type UseTimeTravel<T> = TimeTravel<T> & {
  readonly state: T;
};