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.
Be sure to insert the appropriate Project Key into the key parameter.

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

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

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={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget","getSourceLanguage"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(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 application in a browser.
Select one of your target languages using the language-switching widget.
Refresh the page.
Lather, rinse, repeat, for each page in your application.

Localize will automatically begin to detect new content on the pages that you visit, and will 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.

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.

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