@lab49/react-order-book
Render an order book for any asset class. Flexible and customizable.
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.
react-order-book
tries to be extremely unopinionated about styling, and as such, includes very little actual style rules. There's plenty of examples in the included demo website that show how you can use the rendered class names to create your own beautiful experiences.
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
Table of contents
Demo
Hosted demo: Hosted demo: https://master--5f4988473b6fd20022f12dcc.chromatic.com/
You can also run the demo locally. To get started:
git clone git@github.com:lab49/react-order-book.git
npm install
npm run storybook
Installation
npm install @lab49/react-order-book
Usage
import { OrderBook } from '@lab49/react-order-book';
const book = {
asks: [
['1.01', '2'],
['1.02', '3'],
],
bids: [
['0.99', '5'],
['0.98', '3'],
],
};
<OrderBook book={book} />
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} />
<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>
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} />;
Props
interface Props {
applyBackgroundColor?: boolean;
askColor?: RgbColor;
bidColor?: RgbColor;
book: OrderBook;
fullOpacity?: boolean;
interpolateColor?: Interpolator;
layout?: Layout;
listLength?: number;
showHeaders?: boolean;
showSpread?: boolean;
spread?: string;
stylePrefix?: string;
}
Layout
Available layout modes. See the demo website for an example of what this looks like.
enum Layout {
Row = 'row'
}
License
MIT @ Lab49