
In this blog post, I will describe to you the most powerful feature of SimpleLocalize, the translation editor. 
It is an essential tool that helps managers, developers and translators in website, app, or any other type of digital content translations.

Localization became one of the most important steps in expanding customer bases and reaching to more people all around the world in their local language. 
It's a considerable task, but SimpleLocalize can help you to simplify the process and support you in daily translations work with great tools, that I describe below.

## Translations view

SimpleLocalize provides with two different views for editing translations. Each of them has specific features and is adjusted to user's role.

### Table View

Table view is a simple, and  at the same time powerful, default spreadsheet-like view. It can store thousands of keys and translations in multiple languages. 
It is easy to use for any type of user. To start translating, simply click on text input and enter your translation in the selected language.

![Translation manager table view](/assets/features/simple-translation-manager-table-view.jpg)

You can customize the table view with different options, to make your work more efficient. All view options you can find in the Settings button in the top-right corner of the table.

#### Languages filter
By default, the table will display all project languages. If you are a translator, you can select only languages that you need for your work, for example, source and target languages.


![Translation manager languages filter](/assets/features/translation-manager-filter-languages.jpg)

#### Key descriptions
Have you ever encountered a problem with locating the translation key and finding out where was it placed in your app? Key descriptions are great help in such cases. 

You can put some help text there, or even add a link to a screenshot with key location! The link with a screenshot of the location will be clickable, and it will open in a new tab automatically. **Key description will add more information and context to the key and save translators time**, so they don't need to search for details or ask other team members for guidance.

![Translation manager translation key descriptions](/assets/features/translation-manager-key-description-for-translators.jpg)

If you are using descriptions directly in your source code, you can also show them in the editor with **Code Description** option from view settings. 

#### Number of characters
Fitting translation texts in different languages to a fixed width element on your website or app, can be a challenging task. Use description column to determine maximum number of characters for keys in problematic locations, and translators will see their text characters count in the editor! 

![Characters count indicator in translation manager](/assets/features/translation-manager-characters-count.jpg)

Save time on counting characters, checking if texts fit well enough. Translation text summary setting in SimpleLocalize will help you control such cases from the start.

#### Auto-translation indicator
Have you already tried the [auto-translation feature](/blog/posts/how-to-use-auto-translation/)? It's **a great help in speeding-up the translation process** for all users! When a key is auto-translated, you can use the option to show the auto-translation indicator near the affected text area. It will look like this, showing the translation service:

![Auto-translation indicator in translation manager](/assets/features/translation-manager-auto-translation-indicator.jpg)

With that option, you can see which keys were auto-translated and need to be verified. Editing such a translation manually will remove the auto-translation indicator. Use that feature to revise and confirm your translations with ease!

#### Search and sort your keys
Do you care only about new or not translated keys? Use sort option to quickly see the newest keys, recently modified translations or missing ones! Search bar will help you find a key or translation text. Those simple filters help in your daily work, when you need to update specific translations, or add and translate new keys.

![Search and sort translation keys](/assets/features/translation-manager-sort-and-search-translations.jpg)

### List View

If you need a **simple list of all keys with their properties and translations**, switch to List View. It's a great option for more advanced projects that require specific information about the key or translation, like when it was created or its source file.

List view contains the list of keys separated in rows. You can expand each key to see translations for each language, key description and information when the key was created or last seen.

![SimpleLocalize translation list view](/assets/features/translation-manager-list-view.jpg)

Another option for the list view is **Side-by-side view**. It splits the view into two columns, so you can see two languages at one. Set the source at the left and target language on the ride side of the view. Below, you can show more information like key details, key or code descriptions.

![SimpleLocalize translation list view](/assets/translation-editor-interface-side-by-side.png)


#### See all your keys

In this view, you can see all your project keys at once, and it's a great option for bigger projects, as it can easily store and display multiple keys. In just one view, you can see the progress of translations to all languages for each key and quickly check translations for selected language with  view options.

![Quick translations reviewing](/assets/features/translation-manager-for-quick-review.jpg)

Moreover, list view has options to **sort and search translations**, as it works in table view.

#### For longer texts

List view is a **great option for translating longer texts**. In view settings, you make text areas bigger and choose the option to wrap text, so you can see all content without scrolling or expanding the area manually.

![Translation editor for long translations](/assets/features/translation-manager-for-long-translations.jpg)

The option to show text summary with number of characters, words and white spaces will help you to control the text length.

#### Key namespace for multi-file translations

If you are using [translations uploaded from multiple files](/docs/cli/upload-translations/), the list view can show you the key namespace (like file path). With that option, you can see from which file the key was uploaded, and that is very useful when you want to upload only the keys from your landing page (one of multiple folders) or from just one language.

![Translation management and namespaces](/assets/features/multi-file-namespaces.jpg)

Learn more about [uploading and downloading translation files with CLI and multi-file option](/blog/posts/multi-file-upload-download/).

#### Customer-specific translations

List view gives you an option to **translate your keys in multiple versions for one language**. This feature, [customer-specific translations](/blog/posts/customer-specific-translations/), allow creating different translation version for specific customer's need. With that feature, you can tailor your app to your customer's needs or requirements, without changing the text and their meaning for other users of your product.   

![Customer specific translations](/assets/features/translation-for-every-customer.jpg)

## Translation management

Wondering how to start with SimpleLocalize? [Sign in with our free community plan](/register/) and [upload your translations](/docs/general/import/). You can do it by importing an Excel file, with API or CLI. With your keys in the system, you can start translating them, adding more languages and sharing the project with your team. [Use auto-translation feature](/docs/general/auto-translation/) to quickly translate your keys to new languages. 

For any doubts, contact Jakub, the creator of SimpleLocalize at jakub@simplelocalize.io.


Translation Editor Explained


**[Auto-translation](/docs/general/auto-translation/)** is a powerful feature which helps you translate your app, website, game or other digital content to multiple languages with just one click.

Using [machine translation services](https://en.wikipedia.org/wiki/Machine_translation) for auto-translations can be extremely helpful to those who want to expand their reach on a global level without having to hire translators. Auto-translation works great for a start of app localization process, it creates translations instantly and with great results.

## How auto-translation works?

SimpleLocalize is integrated with two most popular machine translation services, [DeepL](https://www.deepl.com/translator) and [Google Translate](https://translate.google.com). You can choose between those two providers for the best translation results for your project.

**Google Translate** is a well-known translation service, and it [provides a significant number of available languages](https://cloud.google.com/translate/docs/languages). It's a great option if you need a translation to a less popular or uncommon language.

**DeepL** provides sightly more accurate translations than Google Translate and works better with idioms and slang. What's important in web translations, it can **preserve custom translation format like HTML**. DeepL works really well with texts written in Markdown. It [offers 24 languages](https://www.deepl.com/docs-api/other-functions/listing-supported-languages/) with many varieties, e.g., Portuguese and Portuguese (Brazilian). A really nice feature is also **tone formality** — you can select between formal or informal version in selected languages.

![How to start auto-translation for many languages at once (March 2023)](/video/auto-translation.mp4)

Auto-translation by default won't override your existing translations, unless you decide to replace them. You can auto-translate only selected languages or all of them at once. Translations will be based on the source language, the best matching one for the machine translation service.

### Auto-translation options

- **Excluding variables from translations**. You can exclude selected text from auto translation using brackets `{` and `}` or another character type like `[]`, `<>` or `()`. Simply wrap the text, like here: `There are {charsCount} characters left`, to exclude it from translation. This option will help you translate texts with code snippets inside.

![exclusion dialect](/blog/translation-exclusion-dialects.png)

- **Excluding selected words or phrases**. In Auto-translation settings, you can create a list of words or expressions that will be excluded from auto-translation. You can put there your company name or other proper names that you don't want to get translated.

![auto-translation settings](/blog/translation-excluded-words-or-phrases.png)

- **Auto-publishing translations** to CDN to the latest environment – if you are using SimpleLocalize translation hosting, auto-translated keys can be deployed to your development or staging environment directly.
- **Translating keys** if no translation is available – if your source language has no translation, SimpleLocalize can use the key to work as the source for your translation.

With auto-translation, you can translate your app or website to a new language with just a few simple steps that we describe below.

## How to translate your app with Google Translate or DeepL?

There are only **3 simple steps** to auto-translate your app or website using SimpleLocalize. First, import your existing keys and translations to SimpleLocalize. Second, run auto-translate option. And final step, export ready to go translation files and add them to your project repo, or upload them with one click using SimpleLocalize translation hosting.

### Import your translations to SimpleLocalize

There are multiple ways of importing translations to SimpleLocalize. You can use **Excel, JSON or CSV file formats or import them automatically using CLI or API**. Check out [documentation](https://simplelocalize.io/docs/general/import/) for all details and instructions.

![Import translations window](/blog/import-translations.png)

### Start auto-translation

When your existing translation files are already imported to SimpleLocalize, you are good to go and start working on missing translations or add new languages to your project.   Auto-translation is a great help in the translation process. It can speed up the translation by providing a base for translator's review.

#### Auto-translate single translation

Sometimes you just need some help with translating a single translation key. Here comes our **quick auto-translate option, which you can use directly in the translation editor** in all editor views. Just click on the auto-translate icon in the language you are working on, confirm the settings and source language and hit Auto-translate.

![How to auto-translate a single string in Translation Editor](/video/single-auto-translate.mp4)

Within a second, you can have a ready translation, without copying and pasting texts back and forth to the editor and machine translation provider.

#### Auto-translate languages

To translate all translations from selected languages, or all languages at once, go to the Languages. There, you can use the option **Start auto-translation** for selected language or **Auto-translate all** to use machine translation for all languages (more selected ones) with one click.

![Auto-translate language](/blog/auto-translate-languages.png)

When you choose one of those options, you will see auto-translation settings with extra options. Select a translation service (DeepL or Google Translate), decide on extra options and start translation. You will see translation progress in the languages view.

![Start auto-translation window](/blog/auto-translation-window.png)

### Export translations for your project

When the translations are ready, you can [export the files](https://simplelocalize.io/docs/general/export-translations/) and **upload them to your project** source code. Translation can also be updated automatically with SimpleLocalize [CLI](https://simplelocalize.io/docs/cli/upload-translations/) or [CDN hosting](https://simplelocalize.io/docs/general/translation-hosting/).

![Export translations to file](/blog/export-translations.png)

Automatic translation option is available in all SimpleLocalize plans, you can test it now and see how it works in your project. [Create account](https://simplelocalize.io/register/) in SimpleLocalize to start managing translations more efficiently and expand your business to new levels.

## Auto-translation advantages

Translating a website or app is a significant step in the process of expanding your business. It is a necessary part of localization, and will help you reach more customers who don't speak your native language.

There are many benefits to auto-translation, such as saving time and money on translation services. It also allows you to translate your website into any language without having to know the language yourself. It significantly speeds up the translation process, and using a translation management system, like SimpleLocalize, will help you to keep track of all changes in your project localization. 


How to use auto-translation?


## What is machine translation?

Machine translation (MT) or Automated translation (AT) is the process of automated translation provided by a translation service or software (e.g., Google Translate or DeepL). MT is the process of translating text or speech from one language to another.
Automated translation is a relatively new development. It is aimed at making ubiquitous and useful information accessible to a global audience. 

Different languages have different words for the same things. For example, when you say "hello", people from different countries have different ways of responding.
Some languages make it easier for you to understand them by making the subject disappear after the verb, or making it personal: "Good morning". Other languages require additional information to be understood, 
and force you to attach information to the end of the verb: "Be nice". Not all languages use "be nice" as a completely objective sentence, but most do.

## How does it work?

SimpleLocalize takes all available translations and tries to match the best translation source for a given service (e.g., Google Translate and DeepL). Usually, English translations are taken as the best translation source.
If an English translation is not available for some reason, SimpleLocalize will try to use another language translation. English messages are considered as the best source, and they provide the best results due to fact there is no additional translation step, for example `Polish > English > German`. Not every language is translated directly from one to another. In many cases the step between is needed, which may result with inaccurate translations or even losing context.

## Using DeepL for automated translation

![text with source code translated in DeepL](/blog/app-auto-translation-deepl.png)

In DeepL, all code variables stay untouched during translation process. Here is the HTML example.

```html
<div class="text-bold button">My bold text</div>
```
Please note that the `class` variable and value `text-bold button` are not translated. Great job DeepL!


## Using Google Translate for automated translation

![text with source code translated in Google Translate](/blog/app-auto-translation-google-translate-example.png)

Google Translate is much better in translating longer text with more sentences. However, it cannot always translate text with application source code.
In the example above, the source code has been translated as well together with texts. Now it becomes:

```html
<div klasa="tekst-pogrubiony przycisk">Mój pogrubiony tekst</div>
```

This may cause additional work for software teams because every auto-translated message must be adjusted manually.
Often, SimpleLocalize can extract text from a message to prevent such situations.

## DeepL vs Google Translate

**There is not much difference between those two services in general.** DeepL has advantage that they keep application source code context. In most cases, DeepL
translation output is very accurate for short sentences. Google Translated is a much cheaper solution if you use it for large translation volumes.
Google Translate is better in translating longer texts with multiple sentences, while DeepL can have hiccups.

## How to start using machine translations in app?

**Upload your translations** to SimpleLocalize. You can do it on various ways:
- [API file import](/docs/api/import-translations/),
- [Add translations using API](/docs/api/add-translations/),
- [Upload translations with CLI](/docs/cli/upload-translations/),
- [import translation file manually](/docs/general/import/).

Learn more about [supported file formats](/docs/general/file-formats/).

![translation messages in translation management software](/blog/all-translation-keys-from-application.png)

Once you're done with the import step, you can start adding languages in the 'Languages' tabs.

## How to use auto-translation feature?

![how to use automated translations in SimpleLocalize](/blog/start-auto-translation.png)

**It's simple! Add a new language, click 'Start auto translation' button** next to the language which you want to translate and wait for the results. 
Usually, this process doesn't take more than 5 minutes for big projects with about 5000 translation keys. 

![example of auto translated texts in SimpleLocalize editor](/blog/auto-translated-texts.png)

Translation messages, which have been auto-translated, have a small provider logo next to the input to indicate it has been translated 
automatically. This icon will disappear once you edit translation manually.

## How much does it cost?

**It's free, seriously!** You can translate your application for free with SimpleLocalize. [Our free plan](/pricing#free) allows you to keep 50 translation keys with 
**unlimited number of hosted words, unlimited languages and unlimited number of modifications**.
You are limited to 3 translation jobs per a month in the [SimpleLocalize Community Plan](/pricing#free) and 10 translation jobs in the [SimpleLocalize Developer Plan](/pricing).
The [Team and Business plans](/pricing) has unlimited access to the auto translation feature.

[Try it for Free](/register)


How to translate app automatically?


Software updates can be challenging and yet with every deploy, you must remember about updating your keys, translations, and content. Keeping all text up to date is a key for a perfect impression on the released features. How do you work with translations, do you keep them up to date with every release? See our tips below for the effective translation management. 

## Why should you keep an eye on translations with every software update?

No one likes to read empty keys instead of clean, nicely translated texts. But there are more reasons to watch and control the translation and localization process. They are both important for the overall perception of your site's content. Why is that so?

- **Untranslated keys make the worst impression of your product**. Using keys and texts, you communicate with your users — missing translations give the impression of carelessness, are unprofessional. You don't want your customers to think of you and your product in such categories, for sure. 
- When adding new features and translations to them, do not forget about localization. **Localized text show your customers that you care**. You want your software to be fully adjusted and tailored to the language they use in everyday life. Remember to adjust the content, names of the features and new options to your customers' culture.
- **SEO**. Not translated content or texts copied from an automatic translator are a nightmare for your Google ranking. When adding a new feature, do not forget to share it on your blog and social media too!
- **Not updated translations can be misleading not only for your customers but also for you and your team**. What did that “Disable All” button mean? Was it deactivating all updates or only part of them? If you are not updating texts on a regular basis, you will waste your time later to check and update all keys. 

## How to keep your software translations up to date?

First, plan it. Think of the translation process of your software, what are the weaknesses in your current solution, and how can you improve it? Who will be responsible for the translations, and at what stage of development? What the whole process should look like? 

![application source code with translated messages](/blog/find-and-upload-translations-in-source-code.jpg)

We prepared 3 tips that should help you in keeping the translation process on track. 

### 1. Planning translation process.

When adding new content or changing existing features, you need to remember about adding and updating translations in all languages. How to keep this process in track? 

The translation process needs to be controlled by a human being, though it is prone to errors or mistakes. However, to prevent any issues, make the process as easy and smooth as possible. Complicated operations, tasks in such small thing as it seems, makes the translations a secondary issue.

Start with simple steps. 
- When a development team makes changes, notify the person responsible for translations about new keys to translate. It can be done by the developer with email or automatically. With SimpleLocalize, notification about a new update are sent to selected users, so they can start working on translations.
- Translator translates the changes and publish to development or live environment.

### 2. Updating translations.

Updating translations directly in the code may be challenging, and it means that only developers can change them. Great if they have language skills, but what if you ask a professional translator for help? Imagine updating Excel files with translations, adding it to your code, again and again when a new feature is released. Not the best and fastest option to keep the process smooth and easy.

Instead, think of using an external **software to manage your translations online, in simple translation editor**. SimpleLocalize is a great help for all changes in translations that can be deployed immediately to your app with [SimpleLocalize CLI](https://simplelocalize.io/docs/cli/get-started/). You can **give access to the editor to any team member** to adjust translations in development environment only or in the live version. See the history of all changes, the latest releases and old text versions. Managing multiple languages in one place really helps in keeping translations up to date. 

![translation editor with deepl and google translate logo](/blog/cloud-translation-editor-with-deepl-and-google-translate.jpg)

### 3. Checking and removing unused translation keys.

When was the last time that you deleted unused translations? 
Over the years of creating and developing software, we add lots of new keys. However, we tend to forget about old translations that are no longer used, and to which we are unlikely to return. 

To keep translations up to date, check the age of your translations, if they are used or not updated in a long time. Outdated translations take storage and create disorder in your files. Especially when there are a bunch of such translations.

It may be difficult to check that information in the code, but in SimpleLocalize you can **check not used translations or those that are not updated or pushed to live version in a long time**. Just check the list and remove them from your code to clean up your software. 

![approved translation window with search and trash icon](/blog/how-to-find-unused-translation-keys.jpg)

## What to do next with translations?

**Start simple** — try the **[free version of SimpleLocalize](https://simplelocalize.io/register/)** to see how it can help you to manage your translations and keep them up to date. You can [register to SimpleLocalize](https://simplelocalize.io/register/) with one click and connect your project to update translations automatically in a nice-looking app. Are you ready to get started? 

For any questions about SimpleLocalize, do not hesitate to [contact Jakub](https://simplelocalize.io/docs/general/support/) directly, he knows it all about translations! 😎


How to keep translations up to date?


React localization is one of the topics discussed vividly among developers. There are many [i18n libraries built for React, React Native, and NextJS](/blog/posts/the-most-popular-react-localization-libraries/), that focus on app internationalization. Website or app translation is so important because it positively affects the product visibility and performance, increases the customer base and satisfaction by creating a special relation. It's all thanks to **adjusting the product to their language, customs, and culture**. Developers have a great choice of tools and libraries that can help them in i18n of the product, and one of them is FormatJS. 

## About FormatJS

 FormatJS, originally yahoo/react-intl, is a localization and internationalization set of libraries built mainly for React apps. It helps in i18n process, focusing on **numbers, dates, and strings formatting**. It provides i18n tools and packages that help with localization and app translation management.

A sample i18n file structure in FormatJS looks like this: 

```bash
projectRoot
|-- src
|   |-- App.js
|-- lang
|   |-- en-US.json
|   |-- fr.json
|-- package.json
|-- .eslintrc.js
```

In `lang` we create json files with supported languages, for example, `en-US` or `fr`. FormatJS focuses or improving development process of app internationalization and helps in future translation management.

## How to translate React app with FormatJS?

The installation and translation process is quite straightforward. We will start with creating a sample project, then FormatJS installation and setup, and finally building and translating our app. Sounds fun, right? 😎

### Create a sample project

Let's start with something simple. I will create a new project using [create-react-app](https://github.com/facebook/create-react-app). Use NPM or Yarn like in the example below.

```bash
yarn create react-app simplelocalize-react-intl-example
```

Or download the [demo app from GitHub repository](https://github.com/simplelocalize/simplelocalize-react-intl).

### Install dependencies

Add `react-intl` library to your newly created project.

```bash
# Using NPM
npm i -S react react-intl

# Using yarn
yarn add react react-intl
```

### Add Language Context

In this project, I will use `Context` to keep translations and option to change language in real-time.

```jsx
import React from 'react';

const LanguageContext = React.createContext("en");

export default LanguageContext;
```

Read more about [React Context API](https://reactjs.org/docs/context.html).

### react-intl configuration

Let's create main configuration for i18n with react-intl and SimpleLocalize wrapper.

```jsx
// 📦 file: ./SimpleLocalize.js

import React from "react";
import {IntlProvider} from 'react-intl'
import LanguageContext from "./LanguageContext";

class SimpleLocalize extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: undefined,
      language: "en"
    };
  }

  componentDidMount() {
    this.setupLanguageMessages(this.state.language);
  }

  setupLanguageMessages = (language) => {
    const projectToken = "5e13e3019cff4dc6abe36009445f0883";
    const translationsUrl = `https://cdn.simplelocalize.io/${projectToken}/_latest/${language}`;
    return fetch(translationsUrl)
      .then((data) => data.json())
      .then((messages) => this.setState({language, messages}));
  };

  render() {
    return (
      <LanguageContext.Provider
        value={{
          changeLanguage: (language) => this.setupLanguageMessages(language)
        }}>
        <IntlProvider
          locale={this.state.language}
          messages={this.state.messages}>
          {this.state.messages ? this.props.children : null}
        </IntlProvider>
      </LanguageContext.Provider>
    )
  }
}

export default SimpleLocalize;
```

This wrapper will keep translations in our `LanguageContext` and it will also provide a function to change language in fly.

## Translate your app with FormatJS and SimpleLocalize

Now, it's time to work on i18n and localization process. We use SimpleLocalize to extract translation keys and as a translation management and i18n online editor.


### Create project

Create a [SimpleLocalize.io](https://simplelocalize.io) project to get your unique `messages` variable. For this demo project, you can use the `messages` from the example above!

### Wrap your application

Now let's use our newly created `SimpleLocalize` wrapper to provide translations for React application.

```jsx
// 📦 file: ./index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SimpleLocalize from "./SimpleLocalize";

ReactDOM.render(
    <SimpleLocalize>
      <App/>
    </SimpleLocalize>,
  document.getElementById('root')
);
```

Done! React will now fetch translations from SimpleLocalize CDN and provide them to your app.
Let's check how to use it in the source code.

## Translating React app

Now, let's start using translations, and create a basic web page.

### FormatJS setup

See below how to apply translations for your React app. For that, we will use FormattedMessage component which wraps up all translation keys.

```jsx
// 📦 file: ./App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {FormattedMessage} from "react-intl";
import LanguageContext from "./LanguageContext";

function App() {

  return (
    <LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>

          <img src={logo} className="App-logo" alt="logo"/>
          <p>
            <FormattedMessage id="DESCRIPTION"/>
          </p>

          <a
            className="App-link"
            href="https://simplelocalize.io"
            target="_blank"
            rel="noopener noreferrer"
          >
            <FormattedMessage id="LEARN_MORE"/>
          </a>
        </header>
      </div>)}
    </LanguageContext.Consumer>
  );
}

export default App;

```


### FormattedMessage component

`<FormattedMessage/>` usage is very easy:
```jsx
<FormattedMessage id="YOUR_TRANSLATION_KEY"/>
```

React will convert `FormattedMessage` tag into `span` tag and put concrete translation into it. You can also use `<FormattedHTMLMessage id="TRANSLATION_WITH_CSS"/>` which will also produce a message with HTML inside `span` tag.

A sample translation key could look like the following:

```shell
TRANSLATION_WITH_CSS = This is my <strong>text</strong>
```

### Switch between languages

In the presented example, I used `LanguageContext.Consumer` to provide function. This function can trigger language change and fetch proper messages from the CDN.

```jsx
 <LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>
          //...
        </header>
      </div>)}
    </LanguageContext.Consumer>
```

You need `Language.Consumer` tag only in places where you would like to change the language. It's not needed for `<FormattedMessages/>` tags.

### Let's try it!

Note that translation works in real-time! How cool is that? Very cool!

![React Localization with FormatJS](/blog/formatjs_and_react_app_localization.mp4)

[See live version](https://react-intl.simplelocalize.io)

Project code is available on [GitHub](https://github.com/simplelocalize/simplelocalize-react-intl).

## Translation management for FormatJS

FormatJS is a great tool for translating your React app. It is intuitive and not too complicated to introduce to your project. Using react-intl together with SimpleLocalize can really speed up the translation process with great [auto translation tools (DeepL or Google Translate)](https://simplelocalize.io/docs/general/auto-translation/), many integrations and easy to use [i18n online editor](https://simplelocalize.io/i18n-editor-online/). It's a great help in development process thanks to [SimpleLocalize CLI for FormatJS, which extracts all translation keys](/docs/integrations/format-js-cli) from your project with a simple command.

![i18n online editor](/assets/translation-editor-interface.png)

Check our docs for [FormatJS integration](/docs/integrations/format-js/) in SimpleLocalize and translate your app in our feedback-driven app. Get in touch or send us your feedback at [contact@simplelocalize.io](mailto:contact@simplelocalize.io).


FormatJS and React application localization



## i18next - Background
We took original post inspiration from an awesome guy called [Aryclenio Xavier Barros](https://dev.to/aryclenio), who presented a sample app for localizing app with i18next. You can [read it here](https://dev.to/aryclenio/internationalizing-your-react-app-with-i18next-43op). 
We expanded the idea by adding a section about integrating i18next with translation management system. 


## How to start with i18n in ReactJS?

Thanks to that ReactJS is super popular library, we got so many options. The most popular i18n libraries are i18next and yahoo/react-intl. Today, I will show you how to integrate i18next into your ReactJS application.

## Create a sample project

I will start with very beginning, and I will create sample app in ReactJS with TypeScript

```bash
yarn create react-app simplelocalize-i18next-example --template typescript
```

## Install dependencies

```bash
# Using NPM
npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector axios

# Using yarn
yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector axios
```

Now we are ready to start!

## Configuring i18next

I will create `i18n.ts` file where I will put whole i18next configuration, and after that, we will import this file in `index.ts`.
My `i18n.ts` looks as following:

```tsx
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import axios from "axios";

const fallbackLanguage = 'en'

const projectToken = ""; // YOUR PROJECT TOKEN
const apiKey = ""; // YOUR API KEY

const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/{{lng}}`;
const addMissingTranslationsEndpoint = `https://api.simplelocalize.io/api/v1/translations`;

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    fallbackLng: fallbackLanguage,
    backend: {
      loadPath: loadPath
    },
    saveMissing: true,
    missingKeyHandler: (lngs, ns, key, fallbackValue) => {
      // optional step
      const configuration = {
        headers: {
          'X-SimpleLocalize-Token': apiKey
        }
      };

      const requestBody = {
        content: [
          {
            key: key,
            language: fallbackLanguage,
            text: fallbackValue
          }
        ]
      }
      axios.post(addMissingTranslationsEndpoint, requestBody, configuration)
    }
  })

export default i18n;
```

## Project `loadPath` variable

Create a [SimpleLocalize.io](https://simplelocalize.io) project to get your unique `loadPath` variable. For this demo project, you can use the `loadPath` from the example above!


## Create missing translation keys automatically

I used property `saveMissing` with value `true` to tell i18next to function `missingKeyHandler` to automatically when the library won't find a translation key.
Create on backend missing translation keys with default translation.



## Enable `i18next` in application

Configuration is completed when you import `i18n.ts` file in `index.ts` just by adding `import './i18n';` Whole `index.ts` file should look like this:

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);
```

We are done! i18next library is ready to use.

## Using translations in the app

Now, let's use translations, and create a basic web page. 

## Import `useTranslation` hook

To import the i18next hook, we use the following code:
```tsx
import {useTranslation} from "react-i18next";

function App () {
  const {t, i18n} = useTranslation ();
  //...
```

The `t` variable is a function used to load translations for a given key.

## Using `t` in application code

`t` usage is very simple and clean:
```jsx
t("USE_BUTTONS_BELOW")
```

in HTML, it would look like the following:

```tsx
 <p>{t("USE_BUTTONS_BELOW")}</p>
```

## Switching between language

Now it's a time to add option to switch languages. I will use simple buttons without any fancy CSS styles. :) I added 3 buttons for English, Spanish and Polish language.

```tsx
import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
          <p>
            {t("USE_BUTTONS_BELOW")}
          </p>
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
          <button onClick={() => i18n.changeLanguage("es")}>Spanish</button>
          <button onClick={() => i18n.changeLanguage("pl")}>Polish</button>
        </div>
  );
}

export default App;
```

## Let's check it!

Notice that translation is done in real-time! How cool is that? Very cool!

![React Localization with i18next](/blog/i18next_localization_with_SimpleLocalize.gif)

[see live version](https://i18next.simplelocalize.io)

Project code is available on [GitHub](https://github.com/simplelocalize/simplelocalize-i18next).


Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Tutorial

Translation Editor Explained

How to use auto-translation?

How to translate app automatically?

How to keep translations up to date?

FormatJS and React application localization

i18next and React application localization in 3 steps