useReplay

Replay historical candles at various speeds with play/pause/step controls and progress tracking.

Multi-instance safe

Control state lives in the shared store (state.replay) and the playback timer and data buffers are owned by the provider, so there is exactly one replay session no matter how many useReplay() instances are mounted.

import { useReplay } from "react-klinecharts-ui";

const {
  isReplaying,
  isPaused,
  speed,
  barIndex,
  totalBars,
  startReplay,
  stopReplay,
  togglePause,
  stepForward,
  stepBackward,
  seekTo,
  setSpeed,
} = useReplay();

// Opt-in: cap the buffered window for very long histories.
const capped = useReplay({ maxBars: 2000 });

Try it

API

Property	Type	Description
isReplaying	boolean	Whether a replay session is active
isPaused	boolean	Whether the replay is currently paused
speed	ReplaySpeed	Playback speed multiplier (1 | 2 | 5 | 10)
barIndex	number	Current bar index in the replay
totalBars	number	Total bars in the saved dataset
startReplay	() => void	Start replaying from the beginning
stopReplay	() => void	Stop and restore the original data
togglePause	() => void	Toggle play/pause
stepForward	() => void	Advance one bar while paused
stepBackward	() => void	Go back one bar while paused
seekTo	(index: number) => void	Seek to a bar index (pauses playback)
setSpeed	(speed: ReplaySpeed) => void	Change the playback speed

At higher speeds steps are grouped so the chart reloads at most 6 times per second (MAX_RELOADS_PER_SECOND) while keeping the same wall-clock pace. The optional useReplay({ maxBars }) caps how many trailing bars are buffered for the session (uncapped by default); totalBars then reflects the capped window.