How to support multiple languages in ReactJS application?

Multiple language support is a very common feature for any application. In ReactJS, we can easily add support for multiple languages. It is very straight and easy. The following are the steps to make the ReactJS applications to support multiple languages:

We need to add the react-intl package:

$ npm install react-intl
or
$ yarn add react-intl

On the index.js we can import the react-intl package. Now create a language file and import that too. Following is the example of a index.js file:

import { IntlProvider } from "react-intl";

import localeData from "./locales/languages.json";

// Define user's language. Different browsers have the user locale defined
// on different fields on the `navigator` object, so we make sure to account
// for these different by checking all of them
const language = (navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage;

// Split locales with a region code
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];

// Try full locale, try locale without region code, fallback to 'en'
const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.en;

ReactDOM.render(
    <IntlProvider locale={language} messages={messages}>
        <App />
    </IntlProvider>,
    document.getElementById('root')
);

Here is the example of the language file:

language.json
{
  "en": {
    "Weather.message": "This is English"
  },
  "no": {
    "Weather.message": "This is Norwegian"
  },
  "sv": {
    "Weather.message": "This is Swedish"
  }
}

Here is the call from the component:

        return (
            <Fragment>
                <FormattedMessage id="Weather.message" defaultMessage="Because it is sunny!" />
            </Fragment>
        );

Reference

https://www.freecodecamp.org/news/setting-up-internationalization-in-react-from-start-to-finish-6cb94a7af725/