Internationalization

Internationalization (i18n) is the process of designing your application to support multiple languages and regional differences. This guide shows how you can achieve this with a few simple libraries and patterns.

Installation

We need to install the following libraries:

react-intl which provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

npm install react-intl

@iqmetrix/antd package and antd

npm install antd @iqmetrix/antd

Setup

Wrap with IntlProvider and ConfigProvider, App.tsx component:

import { IntlProvider, FormattedMessage } from "react-intl";

import { ConfigProvider } from "antd";

import frFR from "antd/es/locale/fr_FR";

const messages = {

simple: "Hello world",

placeholder: "Hello {name}",

};

const App: React.FC = () => (

<ConfigProvider locale={frFR}>

<IntlProvider locale="fr" messages={messages}>

<FormattedMessage id="placeholder" values={{ name: "John" }} />

</IntlProvider>

</ConfigProvider>

);

Tips/Gotchas

For some edge cases, we can use a custom hook:

import { useIntl } from 'react-intl';

type MessageFormatPrimitiveValue = string | number | boolean | null | undefined;

function useFormatMessage(id: string, values?: Record<string, MessageFormatPrimitiveValue>) {

const intl = useIntl();

return intl.formatMessage({ id }, values);

}

const Example: React.FC = () => {

const saveBtn = useFormatMessage('component.saveBtn')

<Button key='save' htmlType='submit' type='primary'>

{saveBtn}

</Button>

)