Implementing internationalisation in a React application

Internationalization, or "i18n" for short, refers to the process of designing and developing software that can be easily adapted to different languages and regions. In this blog post, we will discuss how to implement internationalization in a React application.

Before we begin, it's important to note that there are several libraries available that can help with internationalization in React, such as react-intl and react-i18next. In this post, we will be using react-intl as it is widely used and well-documented.

Step 1: Install the react-intl library The first step in implementing internationalization in a React application is to install the react-intl library. This can be done by running the following command in the terminal:

npm install react-intl

Step 2: Create a translation file Next, we will create a translation file that will store all of the translations for our application. This file should be in the JSON format and should contain an object for each language supported by the application. For example, if our application supports English and French, the translation file would look like this:

{
    "en": {
        "hello": "Hello",
        "goodbye": "Goodbye"
    },
    "fr": {
        "hello": "Bonjour",
        "goodbye": "Au revoir"
    }
}

Step 3: Import the react-intl library and use the FormattedMessage component Once the translation file has been created, we can import the react-intl library and use the FormattedMessage component to display translations in our application. The FormattedMessage component takes a id prop, which should match the key of the translation in the translation file.

import { FormattedMessage } from 'react-intl';

const MyComponent = () => {
    return (
        <div>
            <FormattedMessage id="hello" />
        </div>
    )
}

Step 4: Use the IntlProvider component to set the current language The IntlProvider component is used to set the current language for the application. It should be placed at the top level of your application and should take a locale prop, which should match the key of the object in the translation file for the desired language.

import { IntlProvider } from 'react-intl';
import translations from './translations.json';

const App = () => {
    const [locale, setLocale] = useState('en');

    return (
        <IntlProvider locale={locale} messages={translations[locale]}>
            <MyComponent />
        </IntlProvider>
    )
}

Step 5: Switching the language To switch the language, we can change the value of the locale state variable. This can be done by creating a function that sets the locale and passing it as a prop to a button or other UI element that the user can interact with to change the language.

const App = () => {
    const [locale, setLocale] = useState('en');

    const handleLocaleChange = (newLocale) => {
        setLocale(newLocale);
    }

    return (
        <IntlProvider locale={locale} messages={translations[locale]}>
            <MyComponent handleLocaleChange={handleLocaleChange} />
            <button onClick={() => handleLocaleChange('fr')}>Change to French</button>
        </IntlProvider>
    )
}

In the above example, we have added a button that when clicked, calls the handleLocaleChange function and passes in 'fr' as the new locale. This will change the locale state variable and update the translations displayed in the MyComponent.

Step 6: Formatting Dates and Numbers The react-intl library also provides components for formatting dates and numbers, such as FormattedDate and FormattedNumber. These components take a value prop, which should be a JavaScript Date object or a number, respectively, and additional props for specifying the format of the output.

import { FormattedDate, FormattedNumber } from 'react-intl';

const MyComponent = () => {
    return (
        <div>
            <FormattedDate value={new Date()} year="numeric" month="long" day="numeric" />
            <FormattedNumber value={1000} style="currency" currency="USD" />
        </div>
    )
}

In this example, we have used the FormattedDate component to format the current date in the format of "month day, year" and the FormattedNumber component to format the number 1000 as a currency in US dollars.

In conclusion, implementing internationalization in a React application can be done relatively easily using a library such as react-intl. By following the steps outlined in this post, you can easily add support for multiple languages in your application and provide a better user experience for your international audience.