Skip to main content
The orderbook configuration forms the foundation of the Orderbook.Root component. It controls how the component connects to the Kraken WebSocket API, manages incoming price level data, and handles connection failures gracefully.

​
Properties

​
symbol
string
required
The trading pair symbol to subscribe to. Must match Kraken’s WebSocket symbol format.Examples: BTC/USD, ETH/EUR, XRP/GBP, SOL/USDT
<Orderbook.Root config={{ symbol: 'ETH/USD' }}>
    <Orderbook.Panel />
</Orderbook.Root>
Changing the symbol at runtime will close the existing WebSocket connection and establish a new subscription. Use stable state management to avoid unnecessary reconnections.
​
depth
number
default:"1000"
The subscription depth requested from Kraken’s WebSocket API. This determines how many price levels the exchange will send in the initial snapshot and maintain throughout the session.Allowed values: 10, 25, 100, 500, 1000
<Orderbook.Root
    config={{
        symbol: 'BTC/USD',
        depth: 100
    }}
>
    <Orderbook.Panel />
</Orderbook.Root>
Impact on performance:
  • Lower depth (10-25): Minimal network traffic, fastest updates, suitable for high-frequency trading interfaces
  • Medium depth (100): Balanced approach for most applications
  • Higher depth (500-1000): More complete market view, increased bandwidth usage
Choose the lowest depth value that satisfies your UI requirements. If you’re only displaying 25 rows per side, requesting depth: 1000 wastes bandwidth and processing time.
​
limit
number
default:"100"
Maximum number of price levels to keep in memory and make available to your components, per side (bids and asks are counted separately).This acts as a client-side filter on top of the depth setting. Even if you subscribe to depth: 1000, setting limit: 50 will only retain the top 50 price levels.
<Orderbook.Root
    config={{
        symbol: 'BTC/USD',
        depth: 100,
        limit: 50
    }}
>
    <Orderbook.Panel />
</Orderbook.Root>
Memory considerations:
  • Each price level stores: price (number), quantity (number), and timestamp
  • 50 levels ≈ 2KB per side
  • 100 levels ≈ 4KB per side
  • 500 levels ≈ 20KB per side
Set limit to match your UI’s maximum displayed rows. If your table shows 25 rows, use limit: 25 for optimal memory usage.
​
tickSize
number
The minimum price increment (tick size) for the trading pair. This value is used for price rounding and validation throughout the orderbook.If not provided, the component will automatically fetch this value from Kraken’s asset pairs metadata endpoint. However, explicitly setting it can reduce initialization time.
<Orderbook.Root
    config={{
        symbol: 'BTC/USD',
        tickSize: 0.1  // BTC/USD trades in $0.10 increments
    }}
>
    <Orderbook.Panel />
</Orderbook.Root>
Common tick sizes:
  • BTC/USD: 0.1 ($0.10)
  • ETH/USD: 0.01 ($0.01)
  • XRP/USD: 0.0001 ($0.0001)
When tickSize is not provided, the component will show a brief loading state while fetching asset pair metadata.
​
spreadGrouping
number
default:"0.1"
Groups adjacent price levels into buckets of this size, reducing visual noise and improving performance when displaying deep orderbooks.A value of 0 (default) disables grouping.
<Orderbook.Root
    config={{
        symbol: 'BTC/USD',
        tickSize: 0.1,
        spreadGrouping: 1  // Group by 1 increments
    }}
>
    <Orderbook.Panel />
</Orderbook.Root>
Grouping examples for BTC/USD at $45,678:
  • spreadGrouping: 0 - Individual levels: 45,678.10,45,678.10, 45,678.20, $45,678.30…
  • spreadGrouping: 1 - Grouped by 1:1: 45,678.00-45,679.00, $45,679.00-45,680.00…
  • spreadGrouping: 10 - Grouped by 10:10: 45,670.00-45,680.00, $45,680.00-45,690.00…
  • spreadGrouping: 100 - Grouped by 100:100: 45,600.00-45,700.00, $45,700.00-45,800.00…
Benefits:
  • Reduces number of rendered rows
  • Smooths out micro-fluctuations
  • Improves rendering performance
  • Better overview of market depth
Grouping aggregates quantities but may hide important price level details. Use with caution for precision-critical trading interfaces.
​
reconnect
object
Configuration for automatic reconnection behavior when the WebSocket connection is lost or encounters an error.
<Orderbook.Root
    config={{
        symbol: 'BTC/USD',
        reconnect: {
            enabled: true,
            maxAttempts: 5,
            delayMs: 2000
        }
    }}
>
    <Orderbook.Panel />
</Orderbook.Root>
​
debug
boolean
default:"false"
Enables verbose console logging for debugging purposes. When enabled, the component logs connection events, data updates, errors, and internal state changes.
<Orderbook.Root
    config={{
        symbol: 'BTC/USD',
        debug: true
    }}
>
    <Orderbook.Panel />
</Orderbook.Root>
Logged information includes:
  • WebSocket connection state changes
  • Received message payloads
  • Pipeline processing steps
  • Error details and stack traces

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.

Overview

See all configuration options in one place with complete TypeScript types and defaults.