Localise your React app in five minutes

React Studio projects have built in localisation feature which is really powerful even though many users don’t even know that it exists.

Let’s get down to business.

Every React Studio project has a “Localization” data sheet by default. This data sheet holds all translations for basic elements used in the designs. Element text is mapped with localization_key to correct strings (translations) in “language” columns. By default only the ‘en’ column is created but you can create as many language columns needed. In the code the Translations data sheet is “just” an array and you can load it anywhere if you want to customize the exported code in your development pipeline.

Localization sheet with English and Finnish translation strings

Every Project also contains a default Data slot named ds_activeLang. This data slot keeps track of the value for the “current language”. By default value is set to ‘en’ but you can change it to anything you want. Just make sure you have matching column name in your Localization data sheet.

Localization data slot

You can change the language for the app simply by changing the value in the ds_activeLang data slot. When the Data slot value changes app will check the localization data sheet and will load new translation values into elements. You can change the data slot value e.g. with a picker or with Button and Save data interaction. Data slot value can also be changed with script so it’s up to you how designer how the app’s language can is changed.

Here’s also a quick video tutorial about the localization in React Studio

Link to the demo project: https://neonto.cloud/u/localisationndemo