Module @buzzr/dfs-react

@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`

Compatibility and support

Node.js >= 22 is supported. Import the supported API from @buzzr/dfs-react. Deep src/* and dist/* imports are unsupported. This package has no React runtime dependency, but it does depend on the compatible @buzzr/dfs-engine range declared in its package manifest.

Report vulnerabilities privately through SECURITY.md. The versioning and support policy defines the supported runtime and SemVer contract.