orderkit

A lightweight, animated React orderbook component. 3.1KB gzipped. Zero runtime dependencies.

Built for prediction markets and crypto exchanges. Handles thin books (3 levels) and deep books (20+ levels) gracefully. Sanitizes bad data, smooths depth bar jitter on high-frequency feeds, and never collapses on data loss.

Install

npm install orderkit

Quick start

import { Orderbook } from 'orderkit'
import 'orderkit/styles.css'

<Orderbook
  bids={[
    { price: 0.64, size: 5000 },
    { price: 0.63, size: 8000 },
    { price: 0.62, size: 3000 },
  ]}
  asks={[
    { price: 0.66, size: 4000 },
    { price: 0.67, size: 7000 },
    { price: 0.68, size: 2000 },
  ]}
/>

Two props to get started. That's it.

Props

Prop	Type	Default	Description
bids	{ price: number, size: number }[]	required	Buy orders, highest price first
asks	{ price: number, size: number }[]	required	Sell orders, lowest price first
theme	'dark' | 'light'	'dark'	Color scheme
depth	number	10	Max visible price levels per side
showSpread	boolean	true	Show spread row between bids and asks
showHeaders	boolean	true	Column headers (Price / Size / Total)
grouping	number	—	Tick size for price level aggregation
depthMode	'cumulative' | 'level'	'cumulative'	Bar mode: cumulative grows outward, level shows per-level size
highlightChanges	boolean	true	Flash animation on size changes
layout	'vertical' | 'horizontal'	'vertical'	Vertical = asks on top, bids below
formatPrice	(price: number) => string	2 decimal places	Custom price formatter
formatSize	(size: number) => string	Auto K/M	Custom size formatter
className	string	—	Container class
style	CSSProperties	—	Container styles

Theming

Override CSS custom properties on .ok-orderbook:

.ok-orderbook {
  --ok-bg: #0a0a0a;
  --ok-text: #d4d4d4;
  --ok-text-muted: #525252;
  --ok-border: #1a1a1a;
  --ok-bid: #4ade80;
  --ok-ask: #f87171;
  --ok-bid-bar: rgba(74, 222, 128, 0.06);
  --ok-ask-bar: rgba(248, 113, 113, 0.06);
  --ok-font: "SF Mono", ui-monospace, monospace;
  --ok-font-size: 12px;
  --ok-row-height: 24px;
}

Data safety

The component sanitizes input data before rendering:

• Filters out zero, negative, NaN, and Infinity prices/sizes
• Merges duplicate price levels (sums sizes)
• Handles floating point dust (0.1 + 0.2 = 0.3, not 0.30000000000000004)
• Crossed books show "—" spread instead of misleading negative values
• Empty/partial data holds container height — no layout collapse

Performance

• Memoized row components — only re-renders rows whose data changed
• Smoothed depth ratios prevent bar jitter on high-frequency feeds
• Auto-resets smoothing on >10x scale change (handles market switching)
• Instant depth bar updates (no CSS transitions) to preserve visual correctness
• Flash highlights use refs + timers decoupled from React lifecycle — no stuck states

Requirements

• React 18+ or React 19+
• Import orderkit/styles.css for default styling

License

MIT