Skip to main content
This hook relies on useOrderbookHistory. Ensure that historyEnabled is set to true in your orderbook configuration, otherwise there will be no frames to play back.

​
Import

import { useOrderbookPlayback } from '@krono/hooks'

​
Usage

import { useOrderbookPlayback } from '@krono/hooks'

function OrderbookReplay() {
  const {
    currentData,
    isPaused,
    togglePaused,
    goToLive,
    goBack,
    goForward,
    isLive
  } = useOrderbookPlayback();

  if (!currentData) return <div>No history recorded yet...</div>;

  return (
    <div>
      <div className="status">
        {isLive ? <span className="live">Live</span> : <span>Time Travel</span>}
      </div>

      <OrderbookUI data={currentData} />

      <div className="controls">
        <button onClick={goBack}>Step Back</button>
        <button onClick={togglePaused}>{isPaused ? 'Play' : 'Pause'}</button>
        <button onClick={goForward}>Step Forward</button>
        {!isLive && <button onClick={goToLive}>Jump to Live</button>}
      </div>
    </div>
  );
}

​
Parameters

This hook does not accept any parameters. It automatically consumes orderbook history data.

​
Return Type

​
State

​
currentData
OrderbookData | null
The orderbook snapshot at the current playback position. Use this to drive your UI instead of useOrderbookData when in replay mode.
​
isLive
boolean
Returns true if the playback is currently tracking the latest incoming snapshots from the live stream.
​
isPaused
boolean
Indicates if the automatic playback progression is currently halted.
​
index
number
The current frame index in the history buffer.
​
historyLength
number
The total number of snapshots available for playback.
​
timeBehindLive
number
The difference in milliseconds between the current playback frame and the actual current time.
​
nextFrameInfo
object
Metadata about the upcoming transition, including duration between frames, progress (0 to 1), and remaining time.

​
Actions

​
togglePaused
() => void
Toggles between play and pause. Pausing automatically disables live tracking.
​
goToIndex
(i: number) => void
Seeks to a specific frame in the history buffer.
​
goBack
() => void
Steps one frame backward in time.
​
goForward
() => void
Steps one frame forward in time.
​
goToLive
() => void
Resume live tracking, jump to the most recent snapshot, and set isPaused to false.

​
Key Concepts

​
Virtual Time & Interpolation

Unlike a simple loop, useOrderbookPlayback uses requestAnimationFrame and a internal virtualTime state. It calculates the actual time difference between recorded snapshots to ensure that the playback speed matches the real-world frequency of the market updates.

​
Live Tracking

The hook features a “Live Tracking” mode. If you are at the head of the buffer (the latest frame), it stays in sync with incoming market data. If you manually seek backward, tracking is disabled so you can inspect historical data without the UI jumping back to the present every time a new trade occurs.

useOrderbookHistory

The underlying hook that manages the circular buffer of snapshots.

useOrderbookConfig

Used to adjust maxHistoryLength to allow for longer replay sessions.

useAssetPairs

Find the right symbols to travel in time.

Kraken API

Explore the book channel streams level 2 order book docs.