Odds Display
A selectable price in decimal, fractional or American. Decimal is the source of truth and the others are derived, so a format switch can never change what the bet actually pays.
src/components/ui/odds-display.tsxAbout
From the component's own source, where it was written.
A selectable odds button that shows which way the price moved.
Three formats, converted here rather than by the caller. Decimal, fractional and American describe the same price and every operator has to render all three for different markets — doing the conversion in each call site is how they end up disagreeing.
A drift is flagged with an arrow and a colour, which is the one thing a bettor is watching. It is deliberately not animated: odds boards that flash are unusable when several markets move at once.
Install
npx astralyx-ui add odds-display
Usage
import { OddsDisplay } from '@/components/ui/odds-display'
<OddsDisplay label="Arsenal" odds={2.4} format="fractional" onSelect={select} />Composer
Change the props and the source below follows.
<OddsDisplay label="Arsenal" odds={2.4} format="decimal" onSelect={select} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
OddsDisplay
A selectable odds button that shows which way the price moved.
Extends Omit<ComponentProps<'button'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | — |
| odds | number | required | Decimal odds — 2.5 returns two and a half times the stake. Every other format is computed from this one. |
| previousOdds | number | — | Draws a movement arrow. A price drifting out is information a punter acts on. |
| format | OddsFormat | 'decimal' | 'decimal' | 'fractional' | 'american'. Fractional reduces to a readable denominator rather than an exact but absurd one. |
| selected | boolean | false | — |
| suspended | boolean | false | Disables selection and says so. A suspended price that merely looks unselectable produces angry support tickets. |
| onSelect | () => void | — | — |
| driftedLabel | string | 'drifted out' | Accessible name when the price lengthens. |
| shortenedLabel | string | 'shortened' | — |
Functions
| Function | Signature | Description |
|---|---|---|
| formatOdds | (decimal: number, format: OddsFormat) => string | Decimal is the source of truth; the others are derived from it. |
Types
| Type | Definition | Description |
|---|---|---|
OddsFormat | 'decimal' | 'fractional' | 'american' | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| element | button | A real button, so selection is keyboard-reachable and announces its pressed state. |