Currency Formatting

Locale-appropriate currency presentation.

html

<div class="curf" data-amount="1234.5" data-locale="en-US" data-code="false">
  <p class="curf__label">new Intl.NumberFormat(&quot;en-US&quot;, &#123; style: &quot;currency&quot; &#125;)</p>
  <p class="curf__value" style="color:#A8E6C1;">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".curf");
  if (!el) return;
  var amount = Number(el.dataset.amount);
  var locale = el.dataset.locale;
  var code = el.dataset.code === "true";
  var currency = { "en-US": "USD", "de-DE": "EUR", "ja-JP": "JPY" }[locale] || "USD";
  var fmt = new Intl.NumberFormat(locale, { style: "currency", currency: currency, currencyDisplay: code ? "code" : "symbol" });
  el.querySelector(".curf__value").textContent = fmt.format(amount);
})();</script>
<style>
.curf { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.curf__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; word-break: break-word; }
.curf__value { margin: 0; font-size: 28px; font-weight: 800; }
</style>

tailwind

<div class="curftw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border" data-amount="1234.5" data-locale="en-US" data-code="false">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099] break-words">new Intl.NumberFormat(&quot;en-US&quot;, &#123; style: &quot;currency&quot; &#125;)</p>
  <p class="curftw__value m-0 text-3xl font-extrabold" style="color:#A8E6C1;">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".curftw");
  if (!el) return;
  var amount = Number(el.dataset.amount);
  var locale = el.dataset.locale;
  var code = el.dataset.code === "true";
  var currency = { "en-US": "USD", "de-DE": "EUR", "ja-JP": "JPY" }[locale] || "USD";
  var fmt = new Intl.NumberFormat(locale, { style: "currency", currency: currency, currencyDisplay: code ? "code" : "symbol" });
  el.querySelector(".curftw__value").textContent = fmt.format(amount);
})();</script>

react

import { useMemo } from "react";

export function CurrencyFormatting({
  amount = 1234.5,
  locale = "en-US",
  showCode = false,
  accent = "#A8E6C1",
}) {
  const value = useMemo(() => {
    const currency = { "en-US": "USD", "de-DE": "EUR", "ja-JP": "JPY" }[locale] || "USD";
    return new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: showCode ? "code" : "symbol" }).format(amount);
  }, [amount, locale, showCode]);
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099", wordBreak: "break-word" }}>new Intl.NumberFormat("{locale}", {"{"} style: "currency" {"}"})</p>
      <p style={{ margin: 0, fontSize: 28, fontWeight: 800, color: accent }}>{value}</p>
    </div>
  );
}