@orderly.network/hooks provides useOrderbookStream to return formatted data of the orderbook, making it easy for the orderbook to be displayed on the UI. When the symbol parameter changes, the hook will automatically subscribe for the data of the new symbol, thus no additional handling is required. 
const [data, { onDepthChange, isLoading, onItemClick, depth, allDepths }] = useOrderbookStream(
  symbol,
  undefined,
  {
    level: 7,
    padding: false
  }
);
useOrderbookStream returns an array, where the first element is the formatted orderbook data and the second element is an object conatining some data regarding the orderbook status.

​
Data structure

[0] The orderbook data format is as follows: 
// Taking a data snapshot of PERP_ETH_USDC as an example
{
  "asks": [
    [2002.9, 0.0181, 0.0181]
    // ...
  ],
  "bids": [
    [2016.7, 0.0007, 0.0007]
    // ...
  ],
  "markPrice": 999,
  "middlePrice": 999
}
  • The data in each of the asks/bids is (in order):
    • Price
    • Quantity
    • Aggregated quantity, which is the sum of the current row plus all preceding rows
  • asks - List of ask order levels, sorted in ascending order
  • bids - List of bid order levels, sorted in descending order
The default length of the orderbook is 10. This can be modified through the level parameter.

​
Depth

​
allDepths

allDepths is an array containing all the different price tick granularities that the current symbol supports.

​
onDepthChange

onDepthChange is a function that is used when a user changes the price tick granularity display of the orderbook. The hook will aggregate the orderbook levels according to this parameter when providing the orderbook data.