Format with IntlFormat with Intl

One invoice, seven readers

Switch the locale; only the right invoice follows.

const money = new Intl.NumberFormat(locale, { style: "currency", currency });
const pct = new Intl.NumberFormat(locale, { style: "percent" });
const date = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });

Ask the browser, not the IP

Pick a reader and where they connect from.

const SUPPORTED = ["en", "de", "fr", "ja", "pt"];
const ui = navigator.languages
  .map((tag) => tag.split("-")[0])
  .find((lang) => SUPPORTED.includes(lang)) ?? "en";
const when = new Intl.DateTimeFormat(navigator.languages[0], {
  dateStyle: "full",
  timeStyle: "short",
});

Keep names untranslated

Press Translate, then type a product name like Plaid.

<p>Connect <span translate="no">Stripe</span>, post alerts to <span translate="no">Slack</span> …</p>
<p>Then call <code translate="no">useState</code> and run <code translate="no">npm run build</code>.</p>

Why it matters, pros and cons