paint-brush
Translate Your React App with Tolgee: A Step-by-Step Guideโ€‚by@tolgee
423 reads
423 reads

Translate Your React App with Tolgee: A Step-by-Step Guide

by TolgeeDecember 11th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Use Tolgee to localize your React application in simplest way you've ever seen. Tolgee is open-source tool simplifying the localization process of web based applications. You can translate in the context of your app, so you don't have to edit any localization files nor extract keys from your code. With automated screenshot generation feature, you can provide context to translators without manually taking and uploading screenshot.
featured image - Translate Your React App with Tolgee: A Step-by-Step Guide
Tolgee HackerNoon profile picture

Translating an App to multiple languages (localization) is the tricky part for many applications. Tolgee is simplifying the localization process and saves developer's time ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป by removing repetitive tasks


๐Ÿ” โŒ. Saving time? That's what I want. Show me!

What is Tolgee?

Tolgee is an open-source tool combining a localization platform and SDKs to provide a simple way to translate web applications for both developers and translators. ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿง–๐Ÿผ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿง–๐Ÿผ

In context translating ๐Ÿ“–

As a developer of the localized application, you probably have to modify localization data every time you need to change a text. So you have to open the file, add or find the key to modify, save it and check whether everything was changed correctly in the app.


With Tolgee you can just ALT + click the actual translated text in your app and ๐Ÿ’ฅboom๐Ÿ’ฅ translation dialog appears and you are able to translate it right away.


Tolgee - in context translation dialog

Automatic Screenshot Generation ๐Ÿ“ธ

Another tricky part of localization is providing context ๐Ÿ“– to translators. Only exporting the keys and translations in the source language is not always enough. Tolgee enables you to take and upload screenshots directly in the in-context translation dialog. So no more manual taking and uploading screenshots.๐ŸŒ„

Localization platform included โœ…

Tolgee is also a localization platform, where you can manage all your localization strings ๐Ÿ“š. So you can provide access to translators and they can translate the texts there. If you uploaded screenshots before, they know the context of the translations perfectly so they can produce perfect results.

Isn't that hard to integrate? No, it's not!

To get started, you can simply follow the integration guides provided on the platform. Which is the simplest way to get started.

  1. Login to Tolgee Cloud or use your self-hosted Tolgee instance.


  2. Create a new project by clicking Add button in the top right. And filling in the project name.

    Add button

    Optionally, you can add multiple languages to translate your app into.


  3. Select Integrate from the side menu, choose React and generate an API key with all scopes checked.

    Integrate Guide


  4. Success! ๐ŸŽ‰ Now you just have to follow the integration guide.

Let's integrate it into CRA App

  1. Generate a brand new CRA App and open it to your favorite editor


    npx create-react-app tolgee-hello-world
    


  2. Install Tolgee packages โฌ‡๏ธ


    npm install @tolgee/react @tolgee/ui --save
    


  3. Add Tolgee properties to your development .env file env.development.local by copying it from the integration guide


    REACT_APP_TOLGEE_API_URL=https://app.tolgee.io
    REACT_APP_TOLGEE_API_KEY=<your API key>
    


  4. Wrap your App component in index.js with TolgeeProvider component. Again, you can copy it from the integration guide.


    Go to App.js and replace all the crap with a simple "Hello world!" message.


    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <h1>Hello world!</h1>
        </div>
      );
    }
    
    export default App;
    


  1. Wrap the "Hello world!" with <T> component and add keyName prop.


    import './App.css';
    import { T } from '@tolgee/react'
    
    function App() {
      return (
        <div className="App">
          <h1><T keyName="hello_world">Hello world!</T></h1>
        </div>
      );
    }
    
    export default App;
    


  2. Let's run the App in the browser and see the magic! ๐Ÿช„ Hold your ALT key and move your mouse over the text. It should be highlighted. When you click it, dialog opens and you're able to edit the text โœ๏ธ or generate screenshots. ๐Ÿ“ท


    In-context translation of hello_world key After you hit the update button, your Hello World! text will be immediately changed to the new value!

    The result

Congratulations! You're done! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

You can find the resulting code in this GitHub repo, but you have to add your .env.development.local file.

Now you are able to translate your Applications with Tolgee. To learn more about Tolgee or to find out how to translate more complicated cases, visit our docs.

TL;DR

Tolgee is an open-source tool simplifying the process of web based application. It has this features:

  • It's open-source

  • You can translate in the context of your App

  • You can generate screenshots automatically

  • You should use it and save time!

  • Get started on tolgee.io