@lab49/react-order-book

    0.1.2 • Public • Published

    @lab49/react-order-book

    codecov Node.js CI npm version Contributor Covenant

     

    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
    ⇡ Top

    Installation

    npm install @lab49/react-order-book
    ⇡ Top

    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} />

    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>
    ⇡ Top

    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 {
      /**
       * 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;
    }

    Layout

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

    enum Layout {
      Row = 'row'
    }
    ⇡ Top

    Extra

    This project was created with create-react-library.

    ⇡ Top

    License

    MIT @ Lab49

    ⇡ Top

    TODO

    These items are very high level right now. Further discussion and proper roadmap planning will happen in GitHub issues and projects.

    • [ ] Add unit tests.
    • [ ] Incorporate a CI process for publishing.
    • [ ] Add lint-staged to maintain quality.
    • [ ] Add a code of conduct.
    • [ ] Add a contributing guide.
    • [ ] Create a feature roadmap.
    • [ ] Expose functions to help add a price update into the order book. Something like (book: Book, change: Change) => Book, but possibly a class to maintain the book prices in a tree for efficient insert and deletes. See bintrees, and the RBTree.
    • [ ] Expose an HOC to connect to some popular streaming APIs and immediately start rendering an OrderBook. Plus, expose various props to allow customization of the behavior for use with internal streaming APIs of various types (websocket, SSE, etc).
    • [ ] Allow for a custom end color during color interpolation.
    • [ ] Add renderer props for various parts of the component structure (e.g., rowRenderer).
    • [ ] Add formatters for price and size, allow custom formatting.

    Sponsored by Lab49

    Install

    npm i @lab49/react-order-book

    DownloadsWeekly Downloads

    65

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    44.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • erickrodriguez_lab49
    • brianmcallister