> ## Documentation Index
> Fetch the complete documentation index at: https://staging-docs.orderly.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Order Book

> Pre-built React OrderBook component with depth merging, price display, and height adaptation.

```ts theme={null}
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`](/sdks/hooks/market-data/use-orderbook-stream) hook and offers the following features:

* Display of asks/bids/middlePrice/lastPrice data.
* Support for depth merging.
* Automatic adaptation to changes in height.

## Usage

```tsx theme={null}
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`](/sdks/hooks/market-data/use-symbols-info) hook.

### quote

* Type: `API.SymbolExt`
* Required: true

Quote symbol information, can be obtained through the [`useSymbolsInfo`](/sdks/hooks/market-data/use-symbols-info) hook.

```tsx theme={null}
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.

<Info>
  The following parameters/functions are recommended to be obtained through the
  [`useOrderEntry`](/sdks/hooks/orders/use-order-entry) hook.
</Info>

```tsx theme={null}
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.