Formatters

Money, RTP and dates, exact and in the reader’s language.

Win 1,240.00 EUR Stake 0.20 USD RTP 96.50% Played 12 Nov 2026, 09:30

formatters.example.svelte

<script lang="ts">
  import { DateTime, Money, Rtp } from '@onlywin/ui-svelte';
</script>

<div class="example-row example-row--facts">
  <span>Win <strong><Money currency="EUR" minor={124_000} /></strong></span>
  <span>Stake <strong><Money currency="USD" minor="20" /></strong></span>
  <span>RTP <strong><Rtp value="0.9650" /></strong></span>
  <span
    >Played <strong
      ><DateTime
        mode="dateTime"
        value={Date.UTC(2026, 10, 12, 9, 30)}
      /></strong
    ></span
  >
</div>

Usage

Do

Pass money in minor units as integers or integer strings: no floating point.
Pass RTP as the certified decimal string.

Don’t

Do not format numbers by hand; the language decides separators and order.

Accessibility

Dates render as <time> with a machine-readable datetime.

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Money

Money props
Prop	Type	Default	Description
`currency` *required	`string`	—
`exponent`	`number`	`2`	Decimal places of the currency (2 for EUR, 0 for JPY).
`minor` *required	`number \| string \| null`	—	Minor units (cents), as an integer or an integer string; `null` shows `—`.

Rtp

Rtp props
Prop	Type	Default	Description
`value` *required	`string \| null`	—	The RTP as a ratio decimal string (`0.9650`); `null` shows `—`.

DateTime

DateTime props
Prop	Type	Default	Description
`mode`	`'calendar' \| 'date' \| 'dateTime' \| 'time'`	`'dateTime'`	`date` and `dateTime` for an instant; `calendar` for a `YYYY-MM-DD` date.
`value` *required	`number \| string`	—	Epoch milliseconds, or `YYYY-MM-DD` with `mode: 'calendar'`.