
## Background

In this article, I will show you how to create a multi-language landing page in GatsbyJS.
I assume you already set up a Gatsby project, and we will start right from adding multi-language pages.

> Check our [template repository on GitHub](https://github.com/simplelocalize/multi-language-gatsby-example).

## Install dependencies

I will use FormatJS library as it's one of [the most popular React library for internationalization](/blog/posts/the-most-popular-react-localization-libraries), and it plays nice
with Gatsby plugin system.

```bash
# Npm users
npm install --save react-intl

# Yarn users
yarn add react react-intl
```

## Create i18n configuration file

Create a `i18n.js` file in your `src` directory to keep all i18n configuration in one place.

```jsx
const languages = ['en', 'pl', 'es'];
const defaultLanguage = 'en';

exports.defaultLanguage = defaultLanguage;
exports.languages = languages;
```

## Add utility functions

Create a new file with utility functions. I named it `linkUtils.js` and I put this next to `i18n.js` file in the `src` directory.

```jsx
import {defaultLanguage, languages} from "./i18n";

const getTranslatedPath = (pathname, to) => {
  const currentPageLanguage = getCurrentPageLanguage(pathname);

  let languagePath = '';
  const isDefaultLanguage = defaultLanguage === currentPageLanguage;
  if (!isDefaultLanguage) {
    languagePath = '/' + currentPageLanguage
  }


  let outputPath = `${languagePath}${to}`;

  const hasTrailingSlash = outputPath.endsWith("/");
  if (!hasTrailingSlash) {
    outputPath += "/";
  }

  return outputPath;
}

const getCurrentPageLanguage = (pathname) => {
  const pathElements = pathname.split("/");
  for (let element of pathElements) {
    for (let language of languages) {
      if (element === language) {
        return language;
      }
    }
  }
  return defaultLanguage;
};

export {getTranslatedPath, getCurrentPageLanguage};
```

- `getTranslatedPath` Function returns a route to a page with the same language as the current page.
- `getCurrentPageLanguage` Function returns language from current page path.

## Create custom link component

To give a user to navigate through our website and keep the page language, we need to create a custom `<a/>` element.

```jsx
import React from "react";
import {Location} from '@reach/router';
import {getCurrentPageLanguage, getTranslatedPath} from "./linkUtils";

const LinkTranslated = ({children = [], className = "", href = "/"}) => {
  return (
    <Location>
      {locationProps => {
        const {pathname = ""} = locationProps.location;
        return <a className={className}
                  href={getTranslatedPath(pathname, href)}
                  hrefLang={getCurrentPageLanguage(pathname)}
        >
          {children}
        </a>;
      }}
    </Location>
  );
};

export default LinkTranslated;
```

Now we can use `LinkTranslated` same as a regular `<a/>` tag from HTML.
We can pass a `href` property with base link to some page, and it will be converted into a translated link.

Learn more about [hrefLang attribute](/blog/posts/what-is-hreflang/).

> I used `Location` component from `@reach/router`, to get access to the `location` object.

## Add a wrapper for `IntlProvider`

```jsx
import React from "react";
import {IntlProvider} from "react-intl";

function SimpleLocalize(props) {
  const language = props.pageContext.language;
  const messages = props.pageContext.messages;
  return (
    <IntlProvider
      locale={language}
      messages={messages}>
      {props.children}
    </IntlProvider>
  );
}

export default SimpleLocalize;
```

The main role of this component is to simplify a usage of `<IntlProvider/>` on every page.

## Add translations

Create a `i18n-translations.json` file with translations for all languages.

```json
{
  "en" : {
    "welcome-on-our-website" : "Welcome on our multi-language website",
    "hello-world" : "Hello World!",
    "about-us" : "About us",
    "learn-more-about-us" : "Learn more about us",
    "homepage" : "Homepage"
  },
  "pl" : {
    "welcome-on-our-website" : "Witamy na naszej wielojęzycznej stronie internetowej",
    "hello-world" : "Witaj Świecie!",
    "about-us" : "O nas",
    "learn-more-about-us" : "Dowiedz się więcej o nas",
    "homepage" : "Strona główna"
  },
  "es" : {
    "welcome-on-our-website" : "Bienvenido a nuestro sitio web multilingüe",
    "hello-world" : "Hola, mundo.",
    "about-us" : "Sobre nosotros",
    "learn-more-about-us" : "Más información sobre nosotros",
    "homepage" : "Página web"
  }
}
```

Managing a big JSON file like this might be hard and done only by a software team. This is the reason we created
[SimpleLocalize](/) where you can manage JSON files like this with ease, automatically upload and download them and use
Google Translate or DeepL to auto-translate the texts. [Try it for free for 7 days!](/register)

## Configure multi-language page generation

Now, edit your `gatsby-node.js` configuration file and override `onCreatePage` function like below.

```jsx
const messages = require("./i18n-translations.json")
const {languages, defaultLanguage} = require("./src/i18n");

exports.onCreatePage = async ({page, actions}) => {
  const {createPage, deletePage} = actions;
  return new Promise((resolve) => {
    let path = page.path;
    deletePage(page);

    for (let language of languages) {
      const isDefaultLanguage = language === defaultLanguage;
      if (!isDefaultLanguage) {
        path = '/' + language + page.path;
      }

      const pageForLanguage = Object.assign({}, page, {
        originalPath: page.path,
        path: path,
        context: {
          language,
          messages: messages[language]
        }
      });
      createPage(pageForLanguage)
    }
    resolve()
  })
};
```

Many things are happening here, right? Let start from the beginning.

- First of all, import `translations.json` file from root directory
- Use `deletePage` to remove default page created by Gatsby
- Iterate over all `languages` from `i18n.js`
- Add `/{language}` to path if the language is not the default one
- Get translations for given `language` from `messages` object
- Add language and messages to a page context
- Use `createPage` to recreate a page with a new path and translations



## Create a first multi-language page

Create `index.js` in `/src/pages` directory and paste code below:

```jsx
import React from "react";
import {FormattedMessage} from "react-intl";
import LinkTranslated from "../LinkTranslated";
import SimpleLocalize from "../SimpleLocalize";

function IndexPage(props) {
  return (
    <SimpleLocalize {...props}>
      <h1>
        <FormattedMessage
          id="hello-world"
          defaultMessage="Hello World!"
        />
      </h1>

      <p>
        <FormattedMessage
          id="welcome-on-our-website"
          defaultMessage="Welcome on our multi-language website"
        />
      </p>

      <LinkTranslated
        className="btn btn-link"
        href="/about"
      >
        <FormattedMessage
          id="learn-more-about-us"
          defaultMessage="Learn more about us"
        />
      </LinkTranslated>
      <ul>
        <li><a href="/">English (Default)</a></li>
        <li><a href="/pl/">Polish</a></li>
        <li><a href="/es/">Spanish</a></li>
      </ul>

    </SimpleLocalize>
  );
}
export default IndexPage
```

`SimpleLocalize` Component will provide a `<IntlProvider/>` and `intl` object for `<FormattedMessage/>` components.

## Create second multi-language page

Create file `about.js` in `/src/pages` directory and paste code like below:

```jsx
import React from "react";
import SimpleLocalize from "../SimpleLocalize";
import {FormattedMessage} from "react-intl";
import LinkTranslated from "../LinkTranslated";

function AboutPage(props) {
  return (
    <SimpleLocalize {...props}>
      <h1>
        <FormattedMessage
          id="about-us"
          defaultMessage="About us"
        />
      </h1>

      <LinkTranslated
        className="btn btn-link"
        href="/"
      >
        <FormattedMessage
          id="homepage"
          defaultMessage="Homepage"
        />
      </LinkTranslated>
    </SimpleLocalize>
  );
}
export default AboutPage;
```


## Result

Now, start your project with `npm run develop` and you should see

![Multi-language Gatsby project example](/blog/gatsby-multi-language-project.png)

Full code can be found on GitHub: [github.com/simplelocalize/multi-language-gatsby-example](https://github.com/simplelocalize/multi-language-gatsby-example)



### Message extraction

![Uploading extracted translation keys to translation editor](/blog/uploading-extracted-translation-keys-in-json-file.jpg)

In the repository, you will also find [additional scripts in `package.json`](https://github.com/simplelocalize/multi-language-gatsby-example/blob/master/package.json).

I installed `@formatjs/cli` as a `devDependency` to extract all translations and IDs from `<FormattedMessage/>` components.

```shell
## npm
npm install --save-dev @formatjs/cli

## yarn
yarn add -D @formatjs/cli
```

I used [simplelocalize-cli](/docs/cli/get-started/) to upload found IDs and download ready to use translations.

Scripts explanation:
- `npm run extract` script will extract translations to i18n-extracted.json
- `npm run sync` script will upload found translation keys from i18n-extracted.json and download the latest translations from the server to i18n-translations.json


> Once you change a translation in JSON file, you need to restart GatsbyJS to see the effect. Sometimes you might not see a changed translation, then you need to run `npm run clean` before `npm run develop`.

### Editing translations in SimpleLocalize

Below you see a screenshot from a sample project which I [pushed on GitHub](https://github.com/simplelocalize/multi-language-gatsby-example). Now, I can manage all translations from one place, add more languages and use DeepL or Google Translate to automatically translate them and use in my Gatsby page.

![Manage your translation strings in Translation Editor](/video/translation-editor-change-translations.mp4)

Multi-language content with [properly used `hrefLang` attributes](/blog/posts/what-is-hreflang/) will score much higher in SEO results.


How to create a multi-language website in GatsbyJS?


The [CSA Research study](https://csa-research.com/Blogs-Events/Blog/do-b2b-buyers-value-localization) shows that 66% of business users are more likely to pay more for a localized service than one in a foreign language.
The majority prefer to consume and interact with content in their native language, as it feels more natural and simply right, even for users with advanced English proficiency. The preference for localized products is well noted in software localization.

As you can see, internationalization of your project is critical for its success, if you plan to go to market in a different country. To take that step and introduce i18n support in your project, there are a few important thighs to consider while searching for the right tools. In this blog post we will cover one of them, a very base for proper software localization, which is localization library.

You can access our full [list of localization libraries and tools on Github](https://github.com/jpomykala/awesome-i18n). You are welcome to [add your resources](https://github.com/jpomykala/awesome-i18n) as a pull requests or just [create a new issue](https://github.com/jpomykala/awesome-i18n/issues/new).

## Top React localization libraries

See our list of the best React libraries we gathered. We focused mainly on ReactJS, React Native and Expo libraries.

### 1. FormatJS

[FormatJS](https://formatjs.io) provides i18n and l10n support for web applications with several packages, such as react-intl, which is a package specifically designed for use with React.
React-intl provides React components and utilities for formatting messages, dates, times, and numbers according to different locales. It also supports pluralization and gender agreement.

![FormatJS library](/blog/react-i18n-libraries/format-js.png)

#### See also
- [Integration guide: translations hosting](/docs/integrations/format-js/) - check how to use SimpleLocalize with FormatJS library
- [Extract i18n keys from FormatJS project](/docs/cli/i18n-keys-extraction/) - learn more about message extraction done by SimpleLocalize CLI
- [Blog post: FormatJS and React application localization](/blog/posts/formatjs-reactjs-internationalization/) - blog post about FormatJS translation management with SimpleLocalize
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-react-intl) - example project code with configured FormatJS
- [Live demo](https://react-intl.simplelocalize.io) - see live demo of FormatJS (react-intl) and SimpleLocalize integration


### 2. next-translate

[next-translate](https://github.com/vinissimus/next-translate) is a lightweight translation library for Next.js. It provides an easy way to add i18n support to Next.js projects, with features such as automatic language detection, dynamic translations, and support for multiple locales.

It all started when the developers realised how important is i18n for SEO, and thanks to the community, Next.js decided to introduce internationalized routing.
[Internationalized routing became available](https://nextjs.org/blog/next-10#internationalized-routing) in Next.js 10.

![next-translate](/blog/react-i18n-libraries/next-translate.png)

#### See also
- [Blog post: How to translate NextJS app with next-translate](https://simplelocalize.io/blog/posts/next-translate/) - step-by-step instruction for localization with next-translate


### 3. react-i18next

[React-i18next](https://react.i18next.com/) is one of the most popular localization libraries among React developers.
Commonly used in React localization.
It can be used with React Web and React Native.
i18next was primary created for React only,
but the community gathered among the library created integrations for other frontend frameworks such as AngularJS,
Vue.js and more.

#### See also
- [Integration guide: translations hosting](/docs/integrations/i18next/) - check how to use SimpleLocalize with the i18next library
- [Extract i18n keys from i18next library](/docs/cli/i18n-keys-extraction/) - use SimpleLocalize CLI to find translation keys used in the project
- [Blog post: i18next in 3 steps](/blog/posts/i18next-reactjs-localization/) - blog post about integrating SimpleLocalize with i18next
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-i18next) - sample project with configured i18next with **'http-backed'** and **'loadpath'**
- [Live demo](https://i18next.simplelocalize.io) - see live demo of i18next with configured http-backend and 'loadpath'.

![react localization](/blog/i18next-simplelocalize.png)

### 4. LinguiJS

[LinguiJS](https://github.com/lingui/js-lingui) is a JavaScript library for internationalization and localization of web applications. It offers message extraction and formatting, supports dynamic content, and integrates with popular front-end frameworks like React and Vue.js, Node.js, and Angular.
It provides a comprehensive and well optimized set of tools for developers to create applications that can be easily adapted to different languages

[Comparision of LinguiJS with react-intl](https://lingui.dev/misc/react-intl)

![next-translate](/blog/i18n-linguijs.png)


### 5. react-native-localize

[React-native-localize](https://github.com/zoontek/react-native-localize) is a library for React Native that provides a set of tools for internationalizing and localizing mobile applications. It offers a range of features such as date and time formatting, number formatting, and text direction based on the user's locale. It also provides a simple API for translating strings in your application, making it easy to adapt your app to different languages and cultures.

This library is a toolbox for your React Native app localization.

![react-native-localize](/blog/react-i18n-libraries/react-native-localize.png)


### 6. FormatJS CLI

[FormatJS CLI](https://formatjs.io/docs/tooling/cli/) extracts messages from a project with FormatJS library. Learn [how to upload extracted translation messages to SimpleLocalize](/docs/integrations/format-js-cli).

![formatjs cli](/blog/react-i18n-libraries/i18n-formatjs-cli.png)


### 7. react-i18nify

[React-i18nify](https://github.com/sealninja/react-i18nify) is a simple group of translation and localization components and helpers for your React application.

![react-i18nify](/blog/react-i18n-libraries/react-i18nify.png)



### 8. react-littera

[react-littera](https://github.com/Assembless/react-littera) is a fairly new library for React localization.
It was created to make maintaining and managing translations easier. It allows placing translations right beside your component, as well as storing translations globally. Littera's structure was inspired by react-jss.

![react littera for managing translations](/blog/react-i18n-libraries/react-littera.png)

```shell
npm install --save @assembless/react-littera
```

### 9. react-persian

[react-persian](https://github.com/evandhq/react-persian) is a library for Persian localization in React. It provides a set of components for Persian localization.
Are you developing an application for a Persian audience? You should definitely check this library out.

![react-persian](/blog/react-i18n-libraries/react-persian.png)



### 10. react-translate

[bloodyowl/react-translate](https://github.com/bloodyowl/react-translate) is a set of React utilities for simple i18n handling.
The library is a bit outdated, last commit was in 2019, and last release is dated to end of 2016.

**If some reason you didn't like FormatJS, then the library is worth checking.**

![react-translate](/blog/react-i18n-libraries/react-translate.png)


### 11. react-translated

[react-translated](https://github.com/amsul/react-translated) is a **dead simple way to add complex translations** in a React project.
The library is a bit outdated but definitely work checking!

![react-translated](/blog/react-i18n-libraries/react-translated.png)


### 12. react-intl-hooks (for FormatJS)

[React-intl hooks](https://github.com/CreateThrive/react-intl-hooks) is a small and fast library
that you can use to replace FormatJS components.
It combines the great things about react-intl along with React hooks.
It provides a `t` function, which works like the `t` function in the i18next library.

```tsx
const t = useFormatMessage();
t({ id: 'learn-react', defaultMessage: 'Learn React' })
```

![react-intl hooks](/blog/react-i18n-libraries/react-intl-hooks.png)

```shell
npm install --save react-intl-hooks
```

### 13. typesafe-i18n

[typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.

![typesafe-i18n - demo](/blog/typesafe-i18n-demo.mp4)

```shell
npm install --save typesafe-i18n
```

### 14. SimpleLocalize CLI + TMS

SimpleLocalize allows you to upload and manage translation keys in the cloud.
The free account allows you to host up to 250 translation keys,
and you can test it for bigger files during a 14-day trial.
You can [create your account here](/register/).

#### 1. Upload translations

Upload your translation files using [SimpleLocalize CLI](/docs/cli/upload-translations/), [API](/docs/api/update-translations/) or [import translations](/docs/general/import/) using our web app and file format of your preference.

![How to upload translation files with command-line tool](/docs/cli-upload-translations.mp4)

#### 2. Translate in editor

Add new languages and translations in a simple [translation editor](/docs/general/translation-editor/), adjusted to the whole team's needs. Show code or key descriptions, adjust editor view to your preferences, and work in a developer-friendly environment.

![How to change translation in Translation Editor](/blog/simplelocalize-editor-translate.mp4)

You can use DeepL or Google Translate to [translate texts automatically](/docs/general/auto-translation/).

#### 3. Download translations

When the translations are ready, you can download them in multiple ways. Export translations inside SimpleLocalize or use or CLI and API to get ready to use translation files.

![How to download translation using command-line tool](/docs/cli-download-translations.mp4)

#### 4. Localization hosting

Check also [our translation hosting](/docs/general/translation-hosting/) option
to keep your localization files in the cloud.
Access them easily with superfast CDN and fetch your updated translations anywhere and anytime.


#### See also:
- [i18next: integration guide](/docs/integrations/i18next/)
- [FormatJS: integration guide](/docs/integrations/format-js/)
- [FormatJS CLI: integration guide](/docs/integrations/format-js-cli/)
- [Docs: translation hosting](/docs/general/translation-hosting/)
- [Docs: Getting started with CLI](/docs/cli/get-started/)

👋 Thanks for reading!


List of i18n libraries for React, React Native, and NextJS


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).


i18next and React application localization in 3 steps


## Introduction to software localization

Are you struggling with keeping your app translations up to date, and your dreams are filled with empty keys to translate? No worries, we know that feeling very well. To make the whole localization process easier, we created a simple and effective solution which will improve the quality of translations and help you keep them in track! 

![simplelocalize flow diagram workflow](/blog/cli.jpg)

## How does it work?

**SimpleLocalize is a tool created to help developers manage translations in their apps.** You can use import tool to upload all keys from your project to a cloud editor, translate them in the easy and clean spreadsheet and that’s all you have to do! Translated keys will be synchronized automatically with your project and vice versa, when you add a new key, it will appear in SimpleLocalize cloud ready to add the translation. You can **use SimpleLocalize-CLI to find internationalization keys in the source code automatically**, or you can import and export files manually. We support multiple formats, like [yahoo/react-intl](https://github.com/yahoo/react-intl), Android XML String resources, iOS, Jekyll, Java properties and of course Excel and CSV files. Sounds interesting?

![simplelocalize flow diagram workflow](/blog/simplelocalize-diagram.jpg)

## i18n keys auto-discovery feature 

**SimpleLocalize is created to automatize your work and help you keep all translations up to date.** You can create multiple projects and **share them with your team**, or give access to selected projects to the translators' team. When their job is completed, you can **publish changes to the CDN**, refresh your deployed application and voilà! Everything is translated now! You can easily check the progress of the project translations, track the missing keys and use as many languages as you want. Make your app available worldwide thanks to the professional and always updated translations.


## How to start?

First, head to SimpleLocalize.io and [sign up to get an account](/register), the basic plan it's free, and allows you to handle a medium-sized translation repository. **Create a new project** by adding its name. **Select the project type** which will define the way the translations will be exported, for example, just CDN is the most common for web applications like ReactJS with [yahoo/react-intl](https://github.com/yahoo/react-intl).


![create project](/blog/create-project.jpg)


**Open the project and go to *Settings*.** Download configuration properties with the one click on the button *Download CLI Properties*:

![api credentials page](/blog/credentials.png)

in downloaded file, set `projectType:` property to `yahoo/react-intl`  and it should look now like follows:
```yaml
uploadToken: <PROJECT_UPLOAD_TOKEN>
projectType: yahoo/react-intl
```

[*Read more about CLI `projectType` property*.](https://github.com/simplelocalize/simplelocalize-cli#-supported-libraries) Save the file in your project root directory. Next, run the CLI tool in your project directory using the command line:

```bash
curl -s https://get.simplelocalize.io | bash
```
It will search for the keys in your project directory according to `projectType` defined in the configuration file and send them to the SimpleLocalize cloud, where you can easily check how many translations are missing and manage them in one place.


![spreadsheet](/blog/spreadsheet.png)


Done, you successfully configured the project!

Add translations and publish changes to check how the keys are updated in your project! **When you click *Publish* button all translations will be sent to your frontend app through the CDN**, it works even when the application is deployed. That means you can change text on the page without rebuilding and redeploying the whole application. Pretty useful, huh?

Now you can fetch translations using url like follows:

[https://cdn.simplelocalize.io/:projectToken/_latest/:languageKey](https://simplelocalize.io/docs/general/translation-hosting/)

or use [SimpleLocalize CLI](https://simplelocalize.io/docs/cli/get-started/) to [download translations](https://simplelocalize.io/docs/cli/download-translations/).

![project list](/blog/project-list.png)

## Ready to start?

Give it a try and test the new internationalization tool we have created. It is designed to help you to keep all translations up to date, easily manage new keys and translations changes and work on multiple project at the same time, in one place. Integrate your web or mobile app with SimpleLocalize and work with your clients efficiently without Excel spreadsheets and translations files, instead use the clean and user-friendly interface of SimpleLocalize and control the i18n process in much pleasant way. 
[Create account, no credit card required!](/register)




Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

React

How to create a multi-language website in GatsbyJS?

List of i18n libraries for React, React Native, and NextJS

FormatJS and React application localization

i18next and React application localization in 3 steps

Internationalization tool for yahoo/react-intl