awesome-i18n VS react-i18next

If you are thinking about adding multi language and internationalization to a website or app you should learn about L10N and I18N and a host of other confusing acronyms. There are many resources for assisting with the process with many pre-translated databases for common actions for many languages and frameworks.

There are many tools available. Most of big companies use an online i18n service such as Lokalize to create keys, and let dedicated teams add translations in multiple languages. Then, the devs just update the app's json thanks to a script that download and format to json all online translations. Then, you can use any lib you want. Here is a list: https://github.com/jpomykala/awesome-i18n

Thanks! Checkout also our repo https://github.com/jpomykala/awesome-i18n here :)

I use FormatJS or i18next but there are much more option out there. I recently created a curated list of resources for i18n. Check it on Github: https://github.com/jpomykala/awesome-i18n

Check: awesome-i18n

Full list of localization libraries and tools on Github. Feel free to add your resources as a pull requests or just create a new issue.

In a recent project I've been using react-i18next so I'll use its syntax for the examples, but pretty much every library works similarly.

react-i18next

i18next - You can find documentation and resources for using i18next at react.i18next.com. i18next is a popular internationalization framework for JavaScript, including React. It provides a comprehensive solution for handling translations, formatting, and more.

So far, we’ve been using a utility createLocalizedString to create and use the LocalizedString type. This utility is only really practical in unit tests. For real applications, we’ll want to use a translation function from react-i18next or next-i18next to do the heavy lifting. Then we just wrap the translation functions that are provided in order to use our type:

Website: https://react.i18next.com/

If you are talking about handling translations for your application, take a look at https://react.i18next.com/

I will be supporting Korean as a part of the beta. I have to look deeper into https://react.i18next.com/ in order to understand what it provides. My goal is for engineers to be able to click a single button and have localizations always up to date in their codebase, not delaying shipping a new version or having to even think about it.

With the new react-i18next version, when loading multiple namespaces, t function will infer and accept the keys for the first namespace. So this pattern is now accepted:

react-i18next

In this article I will show you how to translate your React app with React-i18next and give a few examples that you may find useful!