Translate React Apps

Below is a step-by-step guide for integrating Localize into your React application.

If you do not have a Localize Project yet, signup here!

1. Install the Localize Code Snippet

Basic Installation (single project)

If you are working on a React website that only requires the use of one Localize project, follow these instructions.

Copy the following code snippet and paste it into the index.html or layout file.
Paste it into the <head> tag.

<script src="https://global.localizecdn.com/localize.js"></script>

<script>(function(a){if(!a.Localize){a.Localize={X:[]};var methods=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","setWidgetLanguages","hideLanguagesInWidget","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"];for(var i=0;i<methods.length;i++){a.Localize[methods[i]]=(function(m){return function(){a.Localize.X.push([m,arguments]);};})(methods[i]);}}})(window);</script>

<script>
  Localize.initialize({
    key: '[[app:key]]',
    rememberLanguage: true,
    // other options go here, separated by commas
  });
</script>

* Ensure that your Project Key is displayed in between the single quotes next to "key: '????'".

Advanced Installation (multiple projects)

If you are working on a React application that requires the use of multiple Localize projects, you will want to decouple the localize.js script inclusion and scoping from its initialization, and allow for re-initialization where appropriate per project delineation within your app.

Copy and paste the following snippet into the <head> of your index.html or layout file.

<script src="https://global.localizecdn.com/localize.js"></script>
<script>(function(a){if(!a.Localize){a.Localize={X:[]};var methods="translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","setWidgetLanguages","hideLanguagesInWidget","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"];for(var i=0;i<methods.length;i++){a.Localize[methods[i]]=(function(m){return function(){a.Localize.X.push([m,arguments]);};})(methods[i]);}}})(window);</script>

In place of the call to Localize.initialize that is normally included in the basic installation, include a custom Localize.on("setLanguage”,…) listener either here or in your app root logic to keep track of the user's language. This will ensure continuity of language when moving between different parts of your app. For simplicity, an example using local storage is below, but you can use whatever globally accessible client-side persistence makes sense for your application.
```
Localize.on("setLanguage", function(data) {
  // Persist the currently selected language choice
  localStorage.setItem('lz_currentLanguage', data.to);
});
```
Call the Localize.initialize method from your route components or routing logic wherever the user crosses the boundary between one project and another, passing the user’s persisted language as the targetLanguage parameter, with a fallback to your source language.
```
const targetLanguage = localStorage.getItem('lz_currentLanguage') || 'en';

Localize.initialize({
  key: '[[app:key]]', 
  targetLanguage,
  // other options go here, separated by commas
});
```
1. Be sure to insert the appropriate Project Key into the key parameter for the relevant route.
2. Also, change the value of the fallback language if your source language isn't English (en).

2. Add Initialization Options

Add any desired options to the Localize.initialize() call above, check here for the full list of possible options.

Some popular options include:

autoApprove - use to fully automate your translation workflow
localizeImages - allows for localization of images in your site

3. Load your application in a browser.

Visit your website (or application).
Select one of your target languages using the language-switching widget.
Refresh the page.
Lather, rinse, and repeat, for each page on your site.

Localize will automatically begin detecting new content on the pages you visit and bring it into your dashboard.

4. Approve phrases

Then head on over to the Manage Phrases page to approve phrases in the Localize dashboard.

5. Phrases not showing up?

If you are not seeing phrases show up in your Pending bin in the Localize dashboard, follow the troubleshooting instructions here.

Need Help?
Contact support for custom integration help or troubleshooting!

Want to translate your react app in hours, not months?

Explore Localize and see if we're a fit for you. We've helped companies like Intuit, Afterpay, Discord, and more translate their sites and apps in just hours.