Internationalization

Translations

Fusion.js applications can use the fusion-plugin-i18n-react plugin for translations.

The easiest way to add translations to an app is to use the Translate React component:

import React from 'react';
import {Translate} from 'fusion-plugin-i18n-react';

export default () => {
  // translates the key "test"
  return <Translate id="test" />;
});

If a translation needs to be parameterized, pass an object to the data prop:

import React from 'react';
import {Translate} from 'fusion-plugin-i18n-react';

export default () => {
  // translates a key "test" with a value like "hello ${name}"
  return <Translate id="test" data={{name: 'world'}} />;
});

Note: If translations for a key are not available, the key will be displayed.

Dates and time

It is recommended to use the date-fns library or the native JS Intl.DateTimeFormat API to format dates.

This API is natively supported in most browsers, but for especially old browsers a polyfill may be required.

Numbers and currency

It is recommended to use the native JS Intl.NumberFormat API to format numbers and currency.

For example:

const formatted = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'JPY' }).format(123456.789);
// => "123.457 ¥"

This API is natively supported in most browsers, but for especially old browsers a polyfill may be required.