Do you have an app that you use and you want to localize it? Localizing is very important to ensure that all people can use your app with ease. With and you can achieve it easily (and for free)! Localazy LinguiJS Localazy is a free system to help developers and translators focus on their jobs and make the translation process seamless. It provides a pro-active translation memory called which provides highly accurate automatic translations for even easier localization. translation management ShareTM App setup Let’s start with the React app. Create a new project with the following command: Open the newly created project and install for in-app translation management. LinguiJS Localazy setup and integration and create a new app. I will use English as a source language, but you can choose any other. Then on the integration screen, select JSON. We will upload the source strings in a bit. Sign up on Localazy Afterwards, you can Localazy’s CLI for Linux, MacOS or Windows. install Come back to your project. In the root folder, create a file called and paste the following. Make sure to fill in your and which you can retrieve from your app either under the settings tab or in the first step of the JSON CLI guide on the select integration screen. localazy.json writeKey readKey Then, we need to create a file called in our root directory. Fill it in as so, make sure to include whatever locales you use. In this article we’ll use and . .linguirc en es Afterwards, we need to do a little modification to your file. Add the following command: package.json Now, we can create a folder. This is the folder in which we will store all of our locale files. Create a file called in the folder and paste the following: ./src/locales en.json ./src/locales You can change these as you please. That’s just an example of the kinds of things you can do. We are almost ready. Let’s upload the source English phrases to Localazy. Run and you should see your strings on the project screen (you need to refresh the page). ✨ Magical! ✨ localazy upload Go to Settings and scroll down. You should see three options. Make sure is switched on. Use community translations (ShareTM) Learn more about . how ShareTM works At this point, you may add new languages, for which you can use automatic or manual translations. Automatic translations use highly accurate community translations, so they are generally very precise. However, they support translations only from English at the moment, so you need to have the English language added. It does not have to be your source language though. Before downloading, you need to review automatically translated strings. Otherwise, they have only a candidate status and won’t be published. In case you, as an owner, translate anything, the strings are automatically accepted without the review process. Try to add Spanish language and review the suggested phrases or translate them manually (it does not need to be proper Spanish). Now, run to download these new files and set them up with LinguiJS. And just like that, your app is almost done! It’s time to get into the nitty-gritty. npm run localise Using Localazy translations with LinguiJS Here, we are going to give a brief example. LinguiJS already has an amazing guide here In your file, add these lines: index.js Change these imports to match your project. We are just creating a basic welcome page. And in your file, paste this: welcome.js As you can see, to translate with Lingui, we have surrounded the keys with the tags. <Trans></Trans> You may check out the final repo . Remember, this is just a sample, you will have to tweak this to fit into your application, however, this is a great first step to ensure that your project is ready to be localized and allow everyone to use your app, regardless of what languages they speak. here As always, please post your questions, comments, and concerns below. Previously published at https://localazy.com/blog/how-to-localise-your-react-app-with-linguijs-and-localazy

Localizing your React App with LinguiJS and Localazy

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Automating Localization with Github Actions: A How-To Guide

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

Automating Localization with Github Actions: A How-To Guide

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps