bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Manage translations online with React
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.
Our workshops are restarting!
Join the FREE React Native workshop on November 04, and learn to do React Native automated tests with bene : studio and guest presenter from Bitrise
Join the workshop and invite your peers as well! For full details and registration visit the workshop page:
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.
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.
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.
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.
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.
You can find the source code on our Github.
We invite everyone to leave feedback in the form of an issue or contribute by creating a pull request.
Our engineers Dani and Gábor contributed to this article.
Did you like this? Join us!
Want to ask some questions? Share them with us via e-mail to email@example.com and we can set up a talk with our engineers.
Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!
Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.
Read moreSee all open source
React Native Workshop: Connect Native Modules to build an awesome Music Creator
Join our free, online React Native workshop on August 5.
Comparing Reactotron & React Native Debugger
How can we efficiently get rid of bugs using the debugger applications for React Native?
Reducing the size of the final bundles is important, but can be tricky. Let's see how we do it.
Using Create React App for Generating Custom Boilerplates
Exploring Create React App templates and react-scripts to learn how to build your own boilerplate.
How Can Caching Improve your Health App?
Learn how to properly use cache strategies to improve your application quality.
Let bene : studio enhance
your digital product!