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

Import

import { useOrderbookData } from '@krono/hooks'

Usage

import { useOrderbookData } from '@krono/hooks'

function PriceDisplay() {
  const { asks, bids, spread } = useOrderbookData();

  return (
    <div>
      <div className="text-red-500">Best Ask: {asks[0]?.price}</div>
      <div className="font-bold">Spread: {spread}</div>
      <div className="text-green-500">Best Bid: {bids[0]?.price}</div>
    </div>
  );
}

Parameters

disabled
boolean
default:false
If true, the hook will unsubscribe from the data pipeline and stop updating state. Useful for optimizing performance in background tabs or collapsed UI elements.

Return Type

Returns an OrderbookData object containing:

State

asks
Level[]
An array of ask price levels (sorted ascending).
bids
Level[]
An array of bid price levels (sorted descending).
spread
number
The absolute difference between the best ask and best bid.
spreadPct
number
The spread expressed as a percentage of the best ask.
maxTotal
number
The highest cumulative total across both sides, used for calculating depth bar widths.
timestamp
number
The unix timestamp (ms) of when this update was generated.