Components
Currency Format
Pure money helpers for parse, display, edit strings, and ISO 4217 currency metadata — no UI dependencies.
Currency Format ships parseMoneyNumber, formatMoneyForDisplay, formatMoneyForEdit, listCurrencies, getCurrencyMeta, and searchCurrencies. No npm dependencies. Use in tables, summaries, or custom read-only UI. For the money field component, see Currency Input.
Installing
pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/currency-format.jsonnpx shadcn@latest add https://ui.isaacfei.com/r/currency-format.jsonyarn dlx shadcn@latest add https://ui.isaacfei.com/r/currency-format.jsonbun x shadcn@latest add https://ui.isaacfei.com/r/currency-format.jsonWith a namespace: npx shadcn@latest add @f-ui/currency-format.
Usage
import {
formatMoneyForDisplay,
formatMoneyForEdit,
getCurrencyMeta,
listCurrencies,
parseMoneyNumber,
searchCurrencies,
} from '@/components/f-ui/currency-format/currency-format';Examples
Currency style (ISO code)
$1,234.56
Decimal style (no code)
42.50
ISO list — listCurrencies() length
162
Search — searchCurrencies("eur") (first 5)
EUR
Empty parse — helpers return null / display "-"; in tables you often pair with EmptyValuePlaceholder instead
parseMoneyNumber(""):null
Placeholder:—
"use client";
import {
formatMoneyForDisplay,
listCurrencies,
parseMoneyNumber,
searchCurrencies,
} from "@/components/f-ui/currency-format/currency-format";
import { EmptyValuePlaceholder } from "@/components/f-ui/empty-value-placeholder";
export function CurrencyFormatDemo() {
const usd = formatMoneyForDisplay(1234.56, "USD", "en-US");
const plain = formatMoneyForDisplay(42.5, undefined, "en-US");
const emptyParse = parseMoneyNumber("");
const currencyCount = listCurrencies().length;
const eurMatches = searchCurrencies("eur", "en-US").slice(0, 5);
return (
<div className="max-w-md space-y-4 text-sm">
<div className="space-y-1">
<p className="text-muted-foreground text-xs">Currency style (ISO code)</p>
<p className="font-mono tabular-nums">{usd}</p>
</div>
<div className="space-y-1">
<p className="text-muted-foreground text-xs">Decimal style (no code)</p>
<p className="font-mono tabular-nums">{plain}</p>
</div>
<div className="space-y-1">
<p className="text-muted-foreground text-xs">
ISO list — <code className="text-foreground">listCurrencies()</code> length
</p>
<p className="font-mono tabular-nums">{currencyCount}</p>
</div>
<div className="space-y-1">
<p className="text-muted-foreground text-xs">
Search — <code className="text-foreground">searchCurrencies("eur")</code>{" "}
(first 5)
</p>
<p className="font-mono tabular-nums">{eurMatches.join(", ")}</p>
</div>
<div className="space-y-1">
<p className="text-muted-foreground text-xs">
Empty parse — helpers return null / display "-"; in tables you often pair
with <code className="text-foreground">EmptyValuePlaceholder</code> instead
</p>
<p className="flex flex-wrap items-center gap-2">
<span className="text-muted-foreground">parseMoneyNumber(""):</span>
<span className="font-mono">{emptyParse === null ? "null" : String(emptyParse)}</span>
</p>
<p className="flex flex-wrap items-center gap-2">
<span className="text-muted-foreground">Placeholder:</span>
<EmptyValuePlaceholder />
</p>
</div>
</div>
);
}API Reference
| Export | Role |
|---|---|
parseMoneyNumber(value) | Returns a finite number or null; accepts numbers, bigints, or strings with grouping / locale-style separators. |
formatMoneyForDisplay(value, currencyCode?, locale?) | Formatted string with currency symbol when a code is provided, or "-" when the value cannot be parsed. Uses per-currency fraction digits (e.g. JPY → 0). |
formatMoneyForEdit(value, currencyCode?, locale?) | Ungrouped decimal string for focus/edit — no symbol. Empty when value is null. |
listCurrencies() | All ISO 4217 codes via Intl.supportedValuesOf('currency'), with a static fallback for older runtimes. |
getCurrencyMeta(code, locale?) | { code, symbol, minFractionDigits, maxFractionDigits } for a locale. |
searchCurrencies(query, locale?, allowed?) | Filter codes by case-insensitive code or symbol match. |