@lab49/react-order-book

react-order-book is a simple, flexible order book component. Pass in an order book as a prop, and cutomize the look and feel with plenty of configuration options, plus numerous styling hooks for visual customization.

View Demo View Github

This component is perfect for:

  • Trading platforms
  • Order entry systems
  • Dashboards

Features

  • Written in TypeScript
  • Small, simple, configurable, performant
  • Maintained by a team of finance industry professionals

Demo

You can run the demo locally. To get started:

git clone git@github.com:lab49/react-order-book.git
npm install
npm run storybook
Sh

Installation

npm install @lab49/react-order-book
Sh

Usage

import { OrderBook } from '@lab49/react-order-book';

// This is a simple order book structure. There's an array
// of asks, and array of bids. Each entry in the array is
// an array where the first index represents the price,
// and the second index represents the "size", or the total
// number of units of an asset offered at that price.
const book = {
  asks: [
    ['1.01', '2'],
    ['1.02', '3'],
  ],
  bids: [
    ['0.99', '5'],
    ['0.98', '3'],
  ],
};

<OrderBook book={book} />
Js

As discussed above, there are a number of classnames you can use to add your own styles. There is an example of doing exactly that in the included Storybook. There's too many to list out, but by default, all DOM nodes have a classname prefixed with rob_OrderBook. As an example:

<OrderBook book={book} />

// Will render...

<div class="rob_OrderBook">
  <div class="rob_OrderBook__side rob_OrderBook__side--asks">
    // ...more content
  </div>

  <div class="rob_OrderBook__side rob_OrderBook__side--bids">
    // ...more content
  </div>
</div>
React TSX

API

OrderBook

<OrderBook /> is a (props: Props) => JSX.Element. See Props below for a description of the avilable props.

import { OrderBook } from '@lab49/react-order-book';

const MyComponent = () => <OrderBook book={book} />;
React TSX

Props

interface Props {
  /**
   * For the internaly calculated colors, apply a background-color in the DOM.
   */
  applyBackgroundColor?: boolean;
  /**
   * Base color for the asks list.
   */
  askColor?: RgbColor;
  /**
   * Base color for the bids list.
   */
  bidColor?: RgbColor;
  /**
   * Order book object.
   */
  book: OrderBook;
  /**
   * Use a value of 1 for the opacity of each row's generated color.
   */
  fullOpacity?: boolean;
  /**
   * Color interpolator function.
   */
  interpolateColor?: Interpolator;
  /**
   * Various layout options.
   */
  layout?: Layout;
  /**
   * Limit the length of the rendered bids and asks.
   */
  listLength?: number;
  /**
   * Show column headers.
   */
  showHeaders?: boolean;
  /**
   * Show the spread.
   */
  showSpread?: boolean;
  /**
   * Provide a custom spread value instead of letting OrderBook calculate it.
   */
  spread?: string;
  /**
   * Prefix for the CSS class name in the DOM.
   */
  stylePrefix?: string;
}
Ts

Layout

Available layout modes. See the demo website for an example of what this looks like.

enum Layout {
  Row = 'row'
}
Ts