Skip to main content
import { OrderBook } from "@orderly.network/react";
This component is responsible for displaying the order book for a given symbol.

​
Features

The OrderBook component is commonly used in conjuction with the useOrderBookStream hook and offers the following features:
  • Display of asks/bids/middlePrice/lastPrice data.
  • Support for depth merging.
  • Automatic adaptation to changes in height.

​
Usage

import { useState } from "react";
import { OrderBook } from "@orderly.network/react";
import { useOrderbookStream, useSymbolsInfo } from "@orderly.network/hooks";

export const MyOrderBook = () => {
  const [symbol, setSymbol] = useState("PERP_ETH_USDC");
  const config = useSymbolsInfo();
  const symbolInfo = config ? config[symbol] : {};

  const [data, { onDepthChange, isLoading, onItemClick, depth, allDepths }] = useOrderbookStream(
    symbol,
    undefined,
    {
      level: 7
    }
  );

  return (
    <div className="bg-neutral-900 px-5 py-3 w-[300px] rounded-lg h-[480px]">
      <OrderBook
        level={7}
        asks={data.asks}
        bids={data.bids}
        markPrice={data.markPrice}
        lastPrice={data.middlePrice!}
        depth={allDepths}
        activeDepth={depth}
        base={symbolInfo("base")}
        quote={symbolInfo("quote")}
        isLoading={isLoading}
        onItemClick={onItemClick}
        onDepthChange={onDepthChange}
        cellHeight={22}
      />
    </div>
  );
};

​
APIs

​
level

  • Type: number
  • Required: false
Specifies the number of levels of data to be displayed.

​
cellHeight

  • Type: number
  • Required: false
The height of each row, used to calculate the displayed number of rows.

​
base

  • Type: API.SymbolExt
  • Required: true
Base symbol information, can be obtained through the useSymbolsInfo hook.

​
quote

  • Type: API.SymbolExt
  • Required: true
Quote symbol information, can be obtained through the useSymbolsInfo hook. 
import { useSymbolsInfo } from '@orderly.network/hooks';

export const MyOrderBook = () => {
  const config = useSymbolsInfo();
  const symbol = 'PERP_ETH_USDC'
  const symbolInfo = config ? config[symbol] : {};
  return (
    <OrderBook
      {...others}
      base={symbolInfo("base")}
      quote={symbolInfo("quote")}
    />
  )

​
onItemClick

  • Type: (item: OrderBookItem) => void
  • Required: false
Triggered when a user clicks on a row, returning the data of the clicked row. Through this method, you can implement the functionality to populate the order entry form with the data from the clicked row.
The following parameters/functions are recommended to be obtained through the useOrderEntry hook.
import { OrderBook } from "@orderly.network/react";
import { useOrderbookStream } from "@orderly.network/hooks";

export const MyOrderBook = () => {
  //... others code
  const [data, { onDepthChange, isLoading, depth, allDepths }] = useOrderbookStream(
    symbol,
    undefined,
    {
      level: 7
    }
  );

  return (
    <OrderBook
      {...others}
      asks={data.asks}
      bids={data.bids}
      markPrice={data.markPrice}
      lastPrice={data.middlePrice!}
      depth={allDepths}
      activeDepth={depth}
      isLoading={isLoading}
      onDepthChange={onDepthChange}
      cellHeight={22}
    />
  );
};

​
asks

  • Type: OrderBookItem[]
  • Required: true

​
bids

  • Type: OrderBookItem[]
  • Required: true

​
markPrice

  • Type: number
  • Required: true

​
lastPrice

  • Type: number
  • Required: true

​
depth

  • Type: number
  • Required: true
The current depth supported by the trading pair

​
activeDepth

  • Type: number
  • Required: true
The current depth selected by the user

​
isLoading

  • Type: boolean
  • Required: true
Indicates whether data is currently being loaded

​
onDepthChange

  • Type: (depth: number) => void
  • Required: false
Triggered when a user selects an item in the depth list, the parameter is the depth selected by the user.