Number Formatting

Locale-appropriate number presentation.

html

<div class="numf" data-value="1234567.891" data-locale="en-US" data-decimals="2">
  <p class="numf__label">new Intl.NumberFormat(&quot;en-US&quot;)</p>
  <p class="numf__value" style="color:#BFD9F2;">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".numf");
  if (!el) return;
  var fmt = new Intl.NumberFormat(el.dataset.locale, { minimumFractionDigits: Number(el.dataset.decimals), maximumFractionDigits: Number(el.dataset.decimals) });
  el.querySelector(".numf__value").textContent = fmt.format(Number(el.dataset.value));
})();</script>
<style>
.numf { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.numf__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }
.numf__value { margin: 0; font-size: 26px; font-weight: 800; word-break: break-word; }
</style>

tailwind

<div class="numftw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border" data-value="1234567.891" data-locale="en-US" data-decimals="2">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099]">new Intl.NumberFormat(&quot;en-US&quot;)</p>
  <p class="numftw__value m-0 text-[26px] font-extrabold break-words" style="color:#BFD9F2;">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".numftw");
  if (!el) return;
  var fmt = new Intl.NumberFormat(el.dataset.locale, { minimumFractionDigits: Number(el.dataset.decimals), maximumFractionDigits: Number(el.dataset.decimals) });
  el.querySelector(".numftw__value").textContent = fmt.format(Number(el.dataset.value));
})();</script>

react

import { useMemo } from "react";

export function NumberFormatting({
  value = 1234567.891,
  locale = "en-US",
  decimals = 2,
  accent = "#BFD9F2",
}) {
  const formatted = useMemo(() => new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(value), [value, locale, decimals]);
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>new Intl.NumberFormat("{locale}")</p>
      <p style={{ margin: 0, fontSize: 26, fontWeight: 800, wordBreak: "break-word", color: accent }}>{formatted}</p>
    </div>
  );
}