Skip to main content
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: 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

​
Props

​
config
OrderbookRootConfig
required
Configuration object for the orderbook provider.
​
children
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.