Super fast React Localization (i18n) with i18next and Tolgee
So you develop an app in React and you want many users to use it, right? To make your app usable for users in foreign countries, you have to translate your App to their languages. ๐ฌ๐ง ๐จ๐ณ ๐ฎ๐น ๐ช๐ธ ๐ซ๐ท
In this article, I am going to show you, how to integrate i18next and Tolgee into your project and how easy and fast you can translate a React app using these tools.
Tolgee has also its native integrations. Which are a bit easier to set up, so if you're not used to i18next, maybe it would be easier for you to start with those.
What is i18next?โ
i18next
is a library enabling you to localize your app. Basically, you are calling methods of this
library providing keys to be translated. The methods return value in specified language retrieved from localization
files. There is much more about i18next, but let's keep it simple for this tutorial. You can read more about
i18next here.
OK! And what is Tolgee?โ
Tolgee is an open-source tool combining localization platform and integrations to provide a simple way to translate the web applications for both developers and translators. ๐จโ๐ป๐ฉ๐ปโ๐ป๐ง๐ผ๐ฉ๐ปโ๐ป๐ง๐ผ
Tolgee open-source Localization Platform is a place, where you can manage all your localization strings in the simple UI. It's made to simplify the localization process as much as possible. With Tolgee you can translate the localization strings directly in the application you develop without editing localization data files. You can also automatically generate screenshots from your app, which can be used in the future by translators of your project.
You can also let anybody localize your app using in-context translating features, so you can translate the strings directly in the product you are working on. And not only you. Anybody who has access to the project in the Tolgee localization platform can translate the App product directly in it just by ALT + Clicking the key.
So let's dive in to the hacking!