@buzzr/dfs-react

Turn a raw settlement result into a render-ready view-model in one call. @buzzr/dfs-engine is headless — it hands you a DfsSettlementResult with no opinion on display. This package projects that result into pre-formatted labels, currency strings, and status tones your UI can map straight to markup — in React, Vue, Svelte, or vanilla HTML.

Despite the name, this package has zero React runtime dependency. The name signals its primary consumer audience; the code is pure TypeScript formatting functions.

Install

npm install @buzzr/dfs-react @buzzr/dfs-engine

30-second quick start

import { getSlipDisplayModel } from '@buzzr/dfs-react';
import type { DfsSettlementResult } from '@buzzr/dfs-engine';

function SlipCard({ result }: { result: DfsSettlementResult }) {
  const model = getSlipDisplayModel(result);
  // model.statusLabel  -> "won"
  // model.tone         -> "win"        (win | loss | push | pending | void)
  // model.multiplierLabel -> "3.00x"
  // model.payoutLabel  -> "$30.00"
  // model.stakeLabel   -> "$10.00"
  return (
    <div data-tone={model.tone}>
      <header>
        {model.statusLabel} · {model.multiplierLabel} · {model.payoutLabel}
      </header>
      <ul>
        {model.legs.map((leg) => (
          <li key={leg.legId} data-tone={leg.tone}>
            {leg.label} {leg.line}
            {leg.actual !== null && <span> · actual {leg.actual}</span>}
            {leg.pendingReason && <span> · {leg.pendingReason}</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}

Each leg comes back as "Jayson Tatum — Points" (label) with an "o26.5" / "u26.5" line (line), its outcome status, a display tone, and the actual stat value if graded.

API

| Export | Purpose | | ----------------------- | -------------------------------------------------------------------------- | | getSlipDisplayModel() | Project a DfsSettlementResult into a SlipDisplayModel | | getStatusTone() | Map an engine status string to a SlipStatusTone | | formatLegLabel() | Render "{Player} — {PropType}" | | formatLegLine() | Render "o26.5" / "u26.5" | | SlipDisplayModel | Type: slip-level labels, tone, and formatted stake/payout/multiplier | | LegDisplayModel | Type: per-leg label, line, status, tone, actual value, and pending reason | | SlipStatusTone | Type: 'win' \| 'loss' \| 'push' \| 'pending' \| 'void' |

When to use this vs siblings

| You want to… | Reach for | | ------------------------------------------------ | ------------------------------------------------------------------------ | | Format settlement results for any UI layer | this package | | Produce the settlement results in the first place | @buzzr/dfs-engine | | Grade entries from the command line | @buzzr/dfs-cli | | Build settlement fixtures for tests | @buzzr/dfs-testkit |

Links

• Engine API docs
• Monorepo & full package family
• Issues

License

MIT