Internationalization and Localization¶

The WebUI has support for full internationalization and localization via the FormatJS library.

This means that

When inserting user-visible text...¶

Instead of writing it directly the following must happen:

import {FormattedMessage} from 'react-intl'
...
<FormattedMessage id='my.unique.and.descriptive.message.id' />

Then you must add all the localizations for this message to the messages file, translations/messages.yml. (This is YAML, so if it is too long to fit on one line or something, the standard YAML syntax applies.)

We do not use the defaultMessage attribute, to keep the code concise, the messages file consistent, and errors easier to spot.

When formatting a date, time, or number...¶

Use FormattedDate, FormattedRelative or other components from react-intl.

When a React component cannot be used...¶

import {injectIntl} from 'react-intl'

const time_fmt = {
    year:   'numeric',
    month:  'numeric',
    day:    'numeric',
    hour:   'numeric',
    minute: 'numeric',
    second: 'numeric',
}

const SomethingWithTitle = injectIntl(({value, intl}) => (
    <span title={intl.formatDate(value, time_fmt)}>
        <Something/>
    </span>
))