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.


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


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" }} />


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'>
Last updated on by Paulo Andrade