Overview

The Orderbook.Root component serves as the context provider for all orderbook-related components in @krono/kit. It wraps the core @krono/core functionality and provides React hooks and components with access to orderbook data, asset pairs, and playback features.

Basic Setup

The minimal configuration requires only a trading pair symbol:

import { Orderbook } from '@krono/kit'

export const App = () => {
  return (
    <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
      {/* Your components */}
    </Orderbook.Root>
  )
}

Configuration Structure

The config prop accepts an object with orderbook settings and optional asset pairs configuration:

import { Orderbook } from '@krono/kit'

export const App = () => {
  return (
    <Orderbook.Root
      config={{
        // Core orderbook settings
        symbol: 'BTC/USD',
        depth: 100,
        limit: 50,
        tickSize: 0.1,
        spreadGrouping: 1,

        // Performance settings
        throttleMs: 100,
        debounceMs: 0,

        // Reconnection settings
        reconnect: {
          enabled: true,
          maxAttempts: 5,
          delayMs: 1000
        },

        // History settings
        historyEnabled: false,
        maxHistoryLength: 100,

        // Asset pairs settings
        assetPairs: {
          autoFetch: true,
          topN: 100,
          debug: false
        },

        // Debug logging
        debug: false
      }}
    >
      <Orderbook.Panel />
    </Orderbook.Root>
  )
}

Context Providers

The Orderbook.Root component automatically provides the context providers, defined by @krono/hooks:

Orderbook Context: Core settings for symbol, depth, limits, and reconnection
AssetPairs Context: Manages trading pair metadata via useAssetPairs()

All child components can access these contexts through the provided hooks.

The Orderbook.Root component must wrap all components that need access to orderbook data. It cannot be nested.

Configuration Sections

Orderbook Settings: Core settings for symbol, depth, limits, and reconnection
Performance Settings: Throttling and debouncing for optimal performance
History Configuration: Enable snapshot tracking and playback features
Asset Pairs: Configure trading pair metadata fetching

Props

OrderbookRootConfig

required

Configuration object for the orderbook provider.

Show config properties

string

required

Trading pair symbol (e.g., BTC/USD)

number

Subscription depth: 10, 25, 100, 500, or 1000. Default: 1000

number

Maximum price levels per side. Default: 100

number

Minimum price increment. Auto-fetched if not provided.

number

Group price levels by this increment. Default: 0

number

Update frequency in milliseconds. Default: 100

number

Debounce delay in milliseconds. Default: 0

object

Reconnection settings.

Show reconnect properties

boolean

Enable auto-reconnect. Default: true

number

Max reconnection attempts. Default: Infinity

number

Delay between attempts. Default: 1000

boolean

Enable snapshot history. Default: false

number

Max snapshots to store. Default: 100

object

Asset pairs configuration.

Show assetPairs properties

boolean

Auto-fetch on mount. Default: false

number

Limit to top N pairs. Default: undefined

boolean

Enable debug logging. Default: false

boolean

Enable debug logging. Default: false

ReactNode

required

Child components that will have access to orderbook context.

Changes to the config prop will reinitialize the orderbook connection. Use stable configuration objects to avoid unnecessary reconnections.

Performance

Fine-tune update frequency with throttling and debouncing options.

History

Enable snapshot tracking and playback features for historical analysis and debugging.

Asset Pairs

Configure how trading pair metadata is fetched and cached. Required for auto-populating tickSize.

Orderbook

Configure the core orderbook behavior.

Introduction

Configuration

Components

Basic Setup

Configuration Structure

Context Providers

Configuration Sections

Props

Performance

History

Asset Pairs

Orderbook

​Basic Setup

​Configuration Structure

​Context Providers

​Configuration Sections

​Props

​Related

Performance

History

Asset Pairs

Orderbook

Basic Setup

Configuration Structure

Context Providers

Configuration Sections

Props

Related