How to format currency using react i18next library

Question

I have a create-react-app and I need to add i18n support to it. I'm planning to use https://github.com/i18next but in the documentation I couldnt find how to format currencies.

Does anybody how to format currencies using react i18next library?

Thank you so much for your help

Answer 1

You can use Intl.NumberFormat in order to format the currency.

In order to integrate it with i18next I've used the format option.

i18next.init({
  lng: 'en',
  debug: false,
  resources: {
    en: {
      translation: {
        "key": "{{value, price, EUR}}"
      }
    }
  },
  interpolation: {
    format: (value, rawFormat, lng) => {
      const [format, ...additionalValues] = rawFormat.split(',').map((v) => v.trim());
      switch (format) {
        case 'uppercase':
          return value.toUpperCase();
        case 'price':
          return Intl.NumberFormat(lng, {
            style: 'currency',
            currency: additionalValues[0]
          }).format(value);
      }
    }
  }
}).then(function(t) {
  // initialized and ready to go!
  document.getElementById('output').innerHTML = t('key', {
    value: 1000.01
  });
});

<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>

<div id="output"></div>