{"id":26742461,"url":"https://github.com/lab49/react-order-book","last_synced_at":"2025-04-14T17:49:12.754Z","repository":{"id":42173098,"uuid":"286545156","full_name":"lab49/react-order-book","owner":"lab49","description":"Render and style an order book for any asset class. Flexible and customizable.","archived":false,"fork":false,"pushed_at":"2023-07-18T23:30:14.000Z","size":6398,"stargazers_count":33,"open_issues_count":12,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T17:49:02.800Z","etag":null,"topics":["finance","fintech","javascript","react","realtime","streaming","typescript"],"latest_commit_sha":null,"homepage":"https://5f4988473b6fd20022f12dcc-dowjgxuowh.chromatic.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lab49.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-10T18:01:34.000Z","updated_at":"2025-02-27T17:05:23.000Z","dependencies_parsed_at":"2023-02-18T19:31:32.306Z","dependency_job_id":null,"html_url":"https://github.com/lab49/react-order-book","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lab49%2Freact-order-book","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lab49%2Freact-order-book/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lab49%2Freact-order-book/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lab49%2Freact-order-book/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lab49","download_url":"https://codeload.github.com/lab49/react-order-book/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248930956,"owners_count":21185102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["finance","fintech","javascript","react","realtime","streaming","typescript"],"created_at":"2025-03-28T06:18:14.376Z","updated_at":"2025-04-14T17:49:12.726Z","avatar_url":"https://github.com/lab49.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @lab49/react-order-book\n\n[![codecov](https://codecov.io/gh/lab49/react-order-book/branch/master/graph/badge.svg)](https://codecov.io/gh/lab49/react-order-book) [![.github/workflows/cicd.yaml](https://github.com/lab49/react-order-book/actions/workflows/cicd.yaml/badge.svg)](https://github.com/lab49/react-order-book/actions/workflows/cicd.yaml) [![npm version](https://img.shields.io/npm/v/@lab49/react-order-book?label=version\u0026color=%2354C536\u0026logo=npm)](https://www.npmjs.com/package/@lab49/react-order-book)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](code_of_conduct.md)\n\n\u003ch3\u003e\u0026nbsp;\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/.github/react-order-book.png\" width=\"400\"\u003e\n  \u003cp align=\"center\"\u003eRender an order book for any asset class. Flexible and customizable.\u003c/p\u003e\n\u003c/p\u003e\n\u003ch3\u003e\u0026nbsp;\u003c/h3\u003e\n\n![react-order-book](https://user-images.githubusercontent.com/63244584/163017603-11089e79-9ec9-4b3e-8d09-086e62f32e94.gif)\n\n`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.\n\n`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.\n\nThis component is perfect for:\n\n- Trading platforms\n- Order entry systems\n- Dashboards\n\n## Features\n\n- Written in TypeScript\n- Small, simple, configurable, performant\n- Maintained by a team of finance industry professionals\n\n## Table of contents\n\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n\t- [`OrderBook`](#OrderBook)\n  - [`Props`](#Props)\n  - [`Layout`](#Layout)\n- [License](#License)\n- [TODO](#TODO)\n\n## Demo\n\nHosted demo: Hosted demo: [https://master--5f4988473b6fd20022f12dcc.chromatic.com/](https://master--5f4988473b6fd20022f12dcc.chromatic.com/)\n\nYou can also run the demo locally. To get started:\n\n```sh\ngit clone git@github.com:lab49/react-order-book.git\nnpm install\nnpm run storybook\n```\n\n###### [⇡ Top](#table-of-contents)\n\n## Installation\n\n```sh\nnpm install @lab49/react-order-book\n```\n\n###### [⇡ Top](#table-of-contents)\n\n## Usage\n\n```js\nimport { OrderBook } from '@lab49/react-order-book';\n\n// This is a simple order book structure. There's an array\n// of asks, and array of bids. Each entry in the array is\n// an array where the first index represents the price,\n// and the second index represents the \"size\", or the total\n// number of units of an asset offered at that price.\nconst book = {\n  asks: [\n    ['1.01', '2'],\n    ['1.02', '3'],\n  ],\n  bids: [\n    ['0.99', '5'],\n    ['0.98', '3'],\n  ],\n};\n\n\u003cOrderBook book={book} /\u003e\n```\n\nAs 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](./stories/OrderBook.stories.tsx). There's too many to list out, but by default, all DOM nodes have a classname prefixed with `rob_OrderBook`. As an example:\n\n```tsx\n\u003cOrderBook book={book} /\u003e\n\n// Will render...\n\n\u003cdiv class=\"rob_OrderBook\"\u003e\n  \u003cdiv class=\"rob_OrderBook__side rob_OrderBook__side--asks\"\u003e\n    // ...more content\n  \u003c/div\u003e\n\n  \u003cdiv class=\"rob_OrderBook__side rob_OrderBook__side--bids\"\u003e\n    // ...more content\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n###### [⇡ Top](#table-of-contents)\n\n## API\n\n### `OrderBook`\n\n`\u003cOrderBook /\u003e` is a `(props: Props) =\u003e JSX.Element`. See `Props` below for a description of the avilable props.\n\n```tsx\nimport { OrderBook } from '@lab49/react-order-book';\n\nconst MyComponent = () =\u003e \u003cOrderBook book={book} /\u003e;\n```\n\n### `Props`\n\n```ts\ninterface Props {\n  /**\n   * For the internaly calculated colors, apply a background-color in the DOM.\n   */\n  applyBackgroundColor?: boolean;\n  /**\n   * Base color for the asks list.\n   */\n  askColor?: RgbColor;\n  /**\n   * Base color for the bids list.\n   */\n  bidColor?: RgbColor;\n  /**\n   * Order book object.\n   */\n  book: OrderBook;\n  /**\n   * Use a value of 1 for the opacity of each row's generated color.\n   */\n  fullOpacity?: boolean;\n  /**\n   * Color interpolator function.\n   */\n  interpolateColor?: Interpolator;\n  /**\n   * Various layout options.\n   */\n  layout?: Layout;\n  /**\n   * Limit the length of the rendered bids and asks.\n   */\n  listLength?: number;\n  /**\n   * Show column headers.\n   */\n  showHeaders?: boolean;\n  /**\n   * Show the spread.\n   */\n  showSpread?: boolean;\n  /**\n   * Provide a custom spread value instead of letting OrderBook calculate it.\n   */\n  spread?: string;\n  /**\n   * Prefix for the CSS class name in the DOM.\n   */\n  stylePrefix?: string;\n}\n```\n\n### `Layout`\n\nAvailable layout modes. See the demo website for an example of what this looks like.\n\n```ts\nenum Layout {\n  Row = 'row'\n}\n```\n\n###### [⇡ Top](#table-of-contents)\n\n## License\n\nMIT @ [Lab49](https://lab49.com)\n\n###### [⇡ Top](#table-of-contents)\n\n## Sponsored by Lab49\n\n\u003ca href=\"https://lab49.com\"\u003e\n  \u003cimg src=\"https://www.lab49.com/wp-content/uploads/2020/06/logo.svg\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flab49%2Freact-order-book","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flab49%2Freact-order-book","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flab49%2Freact-order-book/lists"}