I18n in React

We can use different libraries to have a multilingual REACT application. The most famous one is react-intl. It’s a good and well-documented package. It gives us some helper tags like FormattedMessage which helps the developer a lot. However, the problem is that you cannot use these helper tags in the attributes of other tags.

For example, you may need to write a code like this:

<input type="text"
    placeholder="<FormattedMessage id="general.username" />" />

Obviously, It won’t work.

So I searched a lot and I almost got disappointed. Suddenly I found the i18next package, and it saved me and the internationalization of the project. You can write a small function, and use the i18n.t method to translate a string and it returns a string instead of a helper tag; problem solved.

In the following, you can see a summarized explanation of how to use the i18next.

Instructions

npm install --save i18next

import i18next from 'i18next'

// i18n.js

i18next.init({
  lng: 'fa',
  resources: {
    'fa': {
      translation: {
        'login': 'ورود',
        'username': 'نام کاربری'
      }
    },
    'en': {
      translation: {
        'login': 'Login',
        'username': 'Username'
      }
    },
  }
})

export default i18n

4. Now you can import it in any component and use it like this:

import { i18n } from 'i18n'
...
<h3>{i18n.t('login')}</h3>
<input type="text" placeholder={i18n.t('username')} />
...

That’s it. It’s really simple, isn’t it?

Related articles

You can read more in the followings:

• i18next – Getting started
• I18n with React and i18next