DEV Community

Cover image for Localize your React.js App the simplest way you've ever seen
Jan Cizmar for Tolgee

Posted on

Localize your React.js App the simplest way you've ever seen

Translating an App to multiple languages (localization) is tricky part of 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 open-source tool combining localization platform and SDKs to provide simple way to translate the web applications for both developers and translators. πŸ‘¨β€πŸ’»πŸ‘©πŸ»β€πŸ’»πŸ§–πŸΌπŸ‘©πŸ»β€πŸ’»πŸ§–πŸΌ

In context translating πŸ“–

As a developer of 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 source language is not always enough. Tolgee enables you to take and upload screenshot directly in the in-context translation dialog. So no more manual taking and uploading screenshots.πŸŒ„

Localization platform included βœ…

Tolgee is also 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 in 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 the project name.

    Add button

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

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

    Add button

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

Let's integrate it into CRA App

  1. Generate brand new CRA App and open it 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 you 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.

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

    import './App.css';
    
    function App() {
      return (
       <div className="App">
         <h1>Hello world!</h1>
       </div>
      );
    }
    
    export default App;
    
  6. 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;
    
  7. 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 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!

πŸ™πŸ™πŸ™ If you like what we do, please star our GitHub projects. πŸ™πŸ™πŸ™

Mouse

Discussion (9)

Collapse
ivanjeremic profile image
Ivan Jeremic

People try to create a SaaS out of everything which is ok but no chance that this will replace i18next or similar for me.

Collapse
jancizmar profile image
Jan Cizmar Author

Why so?

Collapse
ivanjeremic profile image
Ivan Jeremic • Edited on

Because there is no need for something like i18n to be moved to some SaaS it just adds complexity to the whole project and you are probably doing unnecessary Network calls using this service unless you export the JSON from this SaaS and use it in production which is then anyway the same as not using the service, so why should I use this just to look at my strings in a nice designed dashboard and edit them? Who thinks he needs this ok but I think its unnecessary.

Thread Thread
jancizmar profile image
Jan Cizmar Author

First of all, when you are translating your app into multiple languages, the development is full of repetitive tasks. Extracting the keys, modifying the localization files etc. It you are translating to multiple languages, then you would be probably annoyed with those tasks.

The more important part is providing context to translators. When you localizing your app into languages you don't know, then you have no way how to check, that your translators provided accurate translations. Without context, you can be sure, that they will provide inaccurate translations.

The thing is, that it's not just developers who needs to manipulate the strings. It's also translators, who don't understand and sometimes can't even access the code of the app.

Thread Thread
ivanjeremic profile image
Ivan Jeremic

You are right maybe I'm thinking wrong about this, I will check it out and let you know.

Collapse
lukeshiru profile image
LUKESHIRU

How is this better to, let's say, i18next?

Collapse
jancizmar profile image
Jan Cizmar Author • Edited on

i18next doesn't have the cool features like out-of-the-box in-context localization or screenshot generation.

Basically i18next or react-intl are libraries, that are working with some kind of static data stored in jsons. They are basically changing the strings in your app according to current language. Tolgee is complex tool including a localization platform, where you can manage your strings, so you don't have to find any other editor to your localization data.

Collapse
lukeshiru profile image
LUKESHIRU

I mean "screenshots" are kinda "out of scope" for a i18n tool, and there are extensions to get the possible values for a localized string.

Does Tolgee support offline (like if I'm working with a PWA)? Do I have a self-hosted option? Can I import/export translation files?

Thread Thread
jancizmar profile image
Jan Cizmar Author

We don't think that screenshots are "kinda out of scope". When you localize application into more languages, you would probably need translators to do the job for you. The translators produce inaccurate results, when they don't know the context of the strings. That is why Tolgee has the screenshot generation feature. To provide context to translators which can simply find out where on the page the actual string is.

Does Tolgee support offline?
It does. You can export files in jsons and use them in production. @tolgee/react has support for SSR. It is described in docs. :)

Do I have a self-hosted option?
Yes, you have. See self hosting doc page.

Yes, you can import .po (gettext), xliffs of jsons. Currently it supports export just to jsons, since jsons is supported by out SDKs.