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
1.Install the package:
npm install --save i18next
2. Import it in the code:
import i18next from 'i18next'
3. You can have the message lists in separate files and import them or write the messages directly in the initialization:
// 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: