OrderbookControls

The OrderbookControls component provides time-travel functionality for reviewing historical orderbook states with playback controls and timeline navigation.

Basic Usage

import { OrderbookControls } from '@krono/kit'

export const ControlsBasic = () => {
  return (
    <OrderbookControls.Root>
      <OrderbookControls.LiveBadge />
      <OrderbookControls.PlaybackButtons />
    </OrderbookControls.Root>
  )
}

Anatomy

import { OrderbookControls } from '@krono/kit'

<OrderbookControls.Root>
  <OrderbookControls.LiveBadge />
  <OrderbookControls.Toolbar>
    <OrderbookControls.PlaybackButtons />
    <OrderbookControls.Timeline />
  </OrderbookControls.Toolbar>
</OrderbookControls.Root>

Examples

Complete Control Panel

Full-featured control panel with all available controls.

import { OrderbookControls } from '@krono/kit'

export const ControlsComplete = () => {
  return (
    <OrderbookControls.Root>
      <OrderbookControls.LiveBadge />
      <OrderbookControls.Toolbar>
        <OrderbookControls.PlaybackButtons />
        <OrderbookControls.Timeline />
      </OrderbookControls.Toolbar>
    </OrderbookControls.Root>
  )
}

Minimal Controls

Simple control setup with just playback buttons.

import { OrderbookControls } from '@krono/kit'

export const ControlsMinimal = () => {
  return (
    <OrderbookControls.Root>
      <OrderbookControls.PlaybackButtons />
    </OrderbookControls.Root>
  )
}

Custom Styling

Apply custom styling to control components.

import { OrderbookControls } from '@krono/kit'

export const ControlsCustomStyle = () => {
  return (
    <OrderbookControls.Root className="bg-card border-t p-4">
      <div className="flex items-center justify-between max-w-4xl mx-auto">
        <OrderbookControls.LiveBadge className="text-sm" />
        <OrderbookControls.Toolbar className="flex-1 mx-4">
          <OrderbookControls.PlaybackButtons className="gap-2" />
          <OrderbookControls.Timeline className="flex-1" />
        </OrderbookControls.Toolbar>
      </div>
    </OrderbookControls.Root>
  )
}

With Orderbook Integration

Integrate controls directly with the Orderbook component.

import { Orderbook, OrderbookControls, OrderbookTable } from '@krono/kit'

export const ControlsIntegrated = () => {
  return (
    <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
      <Orderbook.Panel
        renderTable={(props) => <OrderbookTable.Root {...props} />}
      >
        <OrderbookControls.Root>
          <OrderbookControls.LiveBadge />
          <OrderbookControls.Toolbar>
            <OrderbookControls.PlaybackButtons />
            <OrderbookControls.Timeline />
          </OrderbookControls.Toolbar>
        </OrderbookControls.Root>
      </Orderbook.Panel>
    </Orderbook.Root>
  )
}

Only Timeline

Display just the timeline scrubber without buttons.

import { OrderbookControls } from '@krono/kit'

export const TimelineOnly = () => {
  return (
    <OrderbookControls.Root>
      <OrderbookControls.Timeline />
    </OrderbookControls.Root>
  )
}

With Settings

Combine controls with settings panel.

import { OrderbookControls, OrderbookSettings } from '@krono/kit'

export const ControlsWithSettings = () => {
  return (
    <div className="space-y-4">
      <OrderbookControls.Root>
        <OrderbookControls.LiveBadge />
        <OrderbookControls.Toolbar>
          <OrderbookControls.PlaybackButtons />
          <OrderbookControls.Timeline />
        </OrderbookControls.Toolbar>
      </OrderbookControls.Root>

      <OrderbookSettings />
    </div>
  )
}

Components

Root

Wrapper component that provides context for all control elements.

<OrderbookControls.Root className="p-4">
  {/* Control components */}
</OrderbookControls.Root>

LiveBadge

Indicator showing whether the orderbook is displaying live data or historical replay.

<OrderbookControls.LiveBadge />

Displays:

LIVE badge when showing real-time data
REPLAY badge when in historical playback mode

PlaybackButtons

Control buttons for playback navigation.

<OrderbookControls.PlaybackButtons />

Features:

Play/Pause toggle
Step backward (previous frame)
Step forward (next frame)
Return to live mode

Timeline

Interactive timeline slider for scrubbing through historical data.

<OrderbookControls.Timeline />

Features:

Drag to scrub through history
Click to jump to specific point
Visual representation of current position
Timestamp display

Container for organizing multiple control elements in a horizontal layout.

<OrderbookControls.Toolbar>
  <OrderbookControls.PlaybackButtons />
  <OrderbookControls.Timeline />
</OrderbookControls.Toolbar>

Props

Root

ReactNode

required

Control components to render.

string

Additional CSS classes for styling.

LiveBadge

string

Additional CSS classes for styling the badge.

PlaybackButtons

string

Additional CSS classes for styling the button group.

Timeline

string

Additional CSS classes for styling the timeline.

ReactNode

required

Control components to display in the toolbar.

string

Additional CSS classes for styling the toolbar.

Playback Behavior

The controls automatically manage orderbook playback state:

Live Mode: Default state showing real-time data
Replay Mode: Activated when interacting with timeline or playback buttons
Auto-resume: Optionally return to live mode after reaching the end of historical data

Notes

OrderbookControls must be used within an OrderbookProvider or Orderbook.RootProvider context to function properly.

The Timeline component provides smooth scrubbing with debounced updates to prevent excessive re-renders during rapid seeking.

Playback functionality requires historical data to be available. The controls will be disabled if no historical data is present.

Introduction

Configuration

Components

OrderbookControls

Basic Usage

Anatomy

Examples

Complete Control Panel

Minimal Controls

Custom Styling

With Orderbook Integration

Only Timeline

With Settings

Components

Root

LiveBadge

PlaybackButtons

Timeline

Props

Root

LiveBadge

PlaybackButtons

Timeline

Playback Behavior

Notes

​Basic Usage

​Anatomy

​Examples

​Complete Control Panel

​Minimal Controls

​Custom Styling

​With Orderbook Integration

​Only Timeline

​With Settings

​Components

​Root

​LiveBadge

​PlaybackButtons

​Timeline

​Toolbar

​Props

​Root

​LiveBadge

​PlaybackButtons

​Timeline

​Toolbar

​Playback Behavior

​Notes

Basic Usage

Anatomy

Examples

Complete Control Panel

Minimal Controls

Custom Styling

With Orderbook Integration

Only Timeline

With Settings

Components

Root

LiveBadge

PlaybackButtons

Timeline

Toolbar

Props

Root

LiveBadge

PlaybackButtons

Timeline

Toolbar

Playback Behavior

Notes