Skip to main content

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

Β· 5 min read
Jan Cizmar 😎

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 i18n tool combining localization platform and SDKs to provide simple way to translate the web applications for both developers and translators. πŸ‘¨β€πŸ’»πŸ‘©πŸ»β€πŸ’»πŸ§–πŸΌπŸ‘©πŸ»β€πŸ’»πŸ§–πŸΌ Tolgee is not just another localization platform offering integrations that only syncs local data with the backend. Instead, Tolgee is truly integrated into your app via SDKs. So no more looking for keys in your source code, no more editing localization files, and no more data exporting for 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. You can even translate in-context on production.

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. You can watch a short tour in the Tolgee platform on our Youtube Channel.

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

To get started, you can simply follow the integration guides provided in the Tolgee localization 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 React.js app into.

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

    Integrate

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

Let's integrate it into React.js App​

  1. Generate brand new React 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 React.js applications with Tolgee. To learn more about Tolgee or to find out how to translate more complicated cases, visit our docs or integrations to other frameworks.

TL;DR​

Tolgee for React provides a simple API to create a multi-lingual React application. With Tolgee i18n library for React, you can enjoy all Tolgee i18n features.

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

  • It's open-source and free localization (i18n) tool
  • You can translate in the context of your React.js app
  • You can generate screenshots automatically
  • Open-source localization platform included
  • Localize react.js app with Tolgee fast and save time!

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

  • Tolgee Platform ⭐ Tolgee JavaScript libraries monorepo
  • Tolgee JS ⭐ Developer & translator friendly web-based localization platform
Jan Cizmar 😎
Jan is a coding mastermind who's on a mission to save the world from software localization chaos. He has a passion for clean code, hates being a copy-pasting monkey πŸ™ˆ and is dedicated to delivering smart and simple software as the head of Tolgee.