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.