Embedding the formatting of currencies, dates and much more in i18next

Formatting currencies is a common problem. Let's say you are working on a website that supports multiple language, and is active in multiple countries. One of the problems that you will face is formatting an amount with a currency in a string that contains text. Example:

En: This will be $7.99.
Fr: This will be 7,99$.

Valid solution

One way of solving this problem is to have 2 distinct processes and call them one by one:

const amount: number = 7.99;
const formattedAmount = toCurrency(amount);
t("This will be {{ amount }}", { amount: formattedAmount });

This solution valid, but it could be nice to delegate this boilerplate to i18next.

i18next solution

Interpolation in i18next accepts a format function that can be implemented to handle formatting.

In your configuration:

interpolation: {
  escapeValue: false,
  // Add this line
  format: (value, format) => (format === "currency" ? toCurrency(value) : value),
},

Then, in your code:

t("This will be {{ amount, currency }}.", { amount: 12 })

This should format the currency properly.

Comments

[Luke Shiru]

Worth mentioning that browsers nowadays have Intl which includes NumberFormat and that can format different currencies without the need of an entire library. So if you need to have something super simple translated, then you can replicate your example in JS without libraries:

// Curried Intl.NumberFormat.format 
const numberFormat = options => locale =>
    new Intl.NumberFormat(locale, options).format;

// We create a formater for euros
const formatEuros = numberFormat({
    style: "currency",
    currency: "EUR"
});

// And we localize that formatter to en-US
const formatEurosEnUS = formatEuros("en-US");

`This will be ${formatEurosEnUS(12)}`; // This will be €12.00

Good thing about this approach is that it makes easy to implement different languages, and is all leveraged to the actual browser:

const formatDolars = numberFormat({
    style: "currency",
    currency: "USD"
});
const formatEurosEsAR = formatEuros("es-AR");
const formatDolarsEnUS = formatDolars("en-US");
const formatDolarsEsArs = formatDolars("es-AR");

Or instead of doing it manually, you could also just use whatever the user has set:

// Manually:
const { language } = navigator;
const formatEurosLocal = formatEuros(language);
const formatDolarsLocal = formatDolars(language);

// Or automatic (the default is the user set language):
const formatEurosLocal = formatEuros();
const formatDolarsLocal = formatDolars();

Cheers!

[Sébastien Belzile]

Indeed, thanks for adding the actual currency formatting implementation part!