Skip to main content

Documentation Index

Fetch the complete documentation index at: https://krono.fabianpiper.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

This hook requires the OrderbookProvider to be present in your component tree to provide the underlying Orderbook instance.

​
Import

import { useOrderbookConfig } from '@krono/hooks'

​
Usage

import { useOrderbookConfig } from '@krono/hooks'

function OrderbookSettings() {
  const { symbol, limit, setLimit } = useOrderbookConfig();

  return (
    <div>
      <h3>Configuring: {symbol}</h3>
      <label>Visible Levels: {limit}</label>
      <input
        type="range"
        min="1"
        max="100"
        value={limit}
        onChange={(e) => setLimit(Number(e.target.value))}
      />
    </div>
  );
}

​
Parameters

This hook does not accept any parameters. It automatically connects to the Orderbook instance provided by the nearest context provider.

​
Return Type

​
State

​
symbol
string
The current trading pair symbol (e.g., “BTC/USD”).
​
limit
number
default:25
The maximum number of visible price levels returned in the data updates.
​
depth
10 | 25 | 100 | 500 | 1000
default:500
The subscription depth requested from the Kraken WebSocket.
​
groupingOptions
number[]
A generated list of 9 user-friendly grouping steps (1x, 2x, 5x, 10x… of tickSize).
​
spreadGrouping
number
The step size for price grouping (aggregation). Defaults to 0 (no grouping).
​
throttleMs
number | undefined
default:1000
The interval in milliseconds used to throttle outgoing data updates.
​
debounceMs
number | undefined
The interval in milliseconds used to debounce outgoing data updates.
​
historyEnabled
boolean
default:true
Whether the instance is currently recording historical snapshots.
​
maxHistoryLength
number
default:86400
The maximum number of snapshots stored in the history buffer.
​
debug
boolean
default:false
Whether verbose logging is enabled for the orderbook instance.

​
Actions

​
setSymbol
(v: string) => void
Updates the trading pair. Note: This will clear existing data and trigger a new WebSocket subscription.
​
setDepth
(v: 10 | 25 | 100 | 500 | 1000) => void
Updates the Kraken subscription depth. Triggers a WebSocket re-subscription.
​
setLimit
(v: number) => void
Adjusts the number of levels filtered from the local cache. Does not trigger a re-subscription.
​
setTickSize
(v: number) => void
Updates the base increment. This regenerates the groupingOptions.
​
setSpreadGrouping
(v: number) => void
Updates the price aggregation step size.
​
setThrottle
(v: number | undefined) => void
Configures the throttle interval for the update pipeline.
​
setDebounce
(v: number | undefined) => void
Configures the debounce interval for the update pipeline.
​
setHistoryEnabled
(v: boolean) => void
Toggles the recording of historical snapshots.
​
setMaxHistoryLength
(v: number) => void
Resizes the internal history buffer.

​
Examples

​
Performance Tuning

Switch between throttling for high-frequency updates or debouncing for a “calmer” UI experience. 
function PerformanceControls() {
  const { throttleMs, setThrottle } = useOrderbookConfig();

  return (
    <button onClick={() => setThrottle(throttleMs === 100 ? undefined : 100)}>
      {throttleMs ? 'Disable Throttling' : 'Enable 100ms Throttle'}
    </button>
  );
}

​
Depth vs. Limit Management

depth controls how much data we request from Kraken, while limit controls how much we actually show in the UI.
For the best performance, keep limit smaller than or equal to depth. Setting a limit of 10 while requesting a depth of 1000 provides a smooth experience when prices move quickly outside the visible range.
function DepthSettings() {
  const { depth, setDepth, limit, setLimit } = useOrderbookConfig();

  return (
    <div className="flex gap-4">
      <select value={depth} onChange={(e) => setDepth(Number(e.target.value))}>
        {[10, 25, 100, 500, 1000].map(d => (
          <option key={d} value={d}>Fetch {d} levels</option>
        ))}
      </select>

      <input
        type="number"
        value={limit}
        onChange={(e) => setLimit(Number(e.target.value))}
        placeholder="Show N levels"
      />
    </div>
  );
}

Orderbook Core

Explore the underlying class logic and event emitters.

useOrderbookConnection

Access and modify the orderbook websocket connection.

useAssetPairs

Find valid symbols to pass to setSymbol.

Kraken API

Explore the book channel streams level 2 order book docs.