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 tool combining a localization platform and SDKs to provide a simple way to translate web applications for both developers and translators. 👨‍💻👩🏻‍💻🧖🏼👩🏻‍💻🧖🏼 open-source 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 the actual translated text in your app and 💥boom💥 translation dialog appears and you are able to translate it right away. ALT + click 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. Login to or use your self-hosted . Tolgee Cloud Tolgee instance Create a new project by clicking button in the top right. And filling in the project name. Add Optionally, you can add multiple languages to translate your app into. Select from the side menu, choose and generate an API key with all . Integrate React scopes checked Success! 🎉 Now you just have to follow the integration guide. Let's integrate it into CRA App Generate a brand new CRA App and open it to your favorite editor npx create-react-app tolgee-hello-world Install  Tolgee packages ⬇️ npm install @tolgee/react @tolgee/ui --save Add Tolgee properties to your development file by from the integration guide .env env.development.local copying it REACT_APP_TOLGEE_API_URL=https://app.tolgee.io
REACT_APP_TOLGEE_API_KEY=<your API key> Wrap your App component in with component. Again, you can copy it from the integration guide. index.js TolgeeProvider Go to and replace all the crap with a simple "Hello world!" message. App.js import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello world!</h1>
    </div>
  );
}

export default App; Wrap the "Hello world!" with component and add keyName prop. <T> 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; Let's run the App in the browser and see the magic! 🪄 Hold your 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. 📷 ALT After you hit the update button, your text will be immediately changed to the new value! Hello World! Congratulations! You're done! 🎉🎉🎉 You can find the resulting code in , file. this GitHub repo but you have to add your .env.development.local 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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps