bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product

Manage translations online with React

April 06, 2021 - Daniel Bali, Gabor Paholics

At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.

These materials come from our internal workshops with our team of developers and engineers.

Pardon the interruption, we have an important message!

We are looking to expand our team with talented developers. Check out our open positions and apply.

Introduction

In a previous article, we shared that the easiest way to deal with internationalization in React is by extracting messages. However, you shouldn’t stop there. If you would like to manage the translations online instead of modifying the JSON files, we have a solution for you.

This application has an admin page that can be attached to any application’s admin page with some customization. It has 2 functional pages, one where you can manage the languages and the messages, and a page to test out the results.

Language management

As you can see in the src/extractMessages.js, instead of English, we store the default messages without categorizing them as any language. On this page, you can add languages to your application, which will be available somewhere on the site.

Message management

You can manage the messages by translating them on this page and add a description, a screenshot, or widget category. If there is no translation for a language, it will be substituted with the default message. Therefore the English column can be mostly unfilled.

Adding messages

There are 2 ways to add new messages. You can use the new message button (not recommended) or use the register-messages command. The last will extract the messages from the code and register them in the database. The server must be up and running (using MongoDB locally) to do this.

Refreshing the messages

When the server starts, it gets the messages from the database, fills the JSON files with them, and places them in the public folder. You can also do it manually after you have changed a message by clicking on the refresh messages button, or you can have your solution refresh the JSONs at each message edition.

Demo page

You can check how your solution works on the demo page. If you change the language, a new message JSON will be downloaded.

Best practices and more

Reuse IntlProvider for multiple repositories

If you have microservices, you can create your own IntlProvider in a utils package and use it in all your microservices. The current locale can be transferred through the script tag and can also be listened to locale changes. You should also distribute the message JSONs between the widgets in this way.

Show children of IntlProvider after the messages are downloaded

To prevent showing the default messages while the JSON file is loading (especially for the non-default languages), it can be a good practice to hide the child components of the IntlProvider during loading. If you use server-side rendering, the content will be visible from the server-side during the loading, and when doing this, you shouldn’t refresh the app before the messages are loaded.

Export, import CSV for translators

It is always a challenge to add a new supported language to your application. For this, the CSV import and export functionality can be beneficial. You can export current translations (usually English) and share them with your translators who can easily convert phrases into another language. Without any other context, the translation needs to be fine-tuned by using the application, but the mass translation can serve as a good starting point. Current package contains simple CSV import-export functionality.