DEV Community

Sébastien Belzile
Sébastien Belzile

Posted on • Edited on

1

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$.
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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),
},
Enter fullscreen mode Exit fullscreen mode

Then, in your code:

t("This will be {{ amount, currency }}.", { amount: 12 })
Enter fullscreen mode Exit fullscreen mode

This should format the currency properly.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (1)

Collapse
 
sbelzile profile image
Sébastien Belzile

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