
[GitHub Actions](https://github.com/features/actions) is a new way for developers to automate their work. 
Actions are simple, yet powerful, pieces of code that can be written in 
any language, and run in the cloud. They're designed to help you ship great software faster by enabling your whole team to collaborate 
on building and maintaining automation pipelines. 

![Github Actions Market - Upload Translations from File Action](/blog/upload-translations-action-on-github-actions-market.png)

[GitHub Actions integration for Continuous Localization](https://simplelocalize.io/docs/integrations/github-actions/) is available on GitHub Market! Connect your GitHub repository to SimpleLocalize i18n editor for free!
The integration with GitHub Actions enables customers to build a workflow where content is automatically added to SimpleLocalize i18n editor.
You can import translations on every branch update or just on pull request. Mange, edit, or review translations in SimpleLocalize Editor and once you are ready, push them to the CDN or save changes and download using GitHub Actions.  

## How to start?

It's simple, create a new yml file in `.github/workflows` directory and put SimpleLocalize actions code in order to download or upload file with translations.

![Github Actions - example download translations action](/blog/download-translations-to-github-repository-github-actions.png)


## Resources:
- [Sample Project with continuous localization](https://github.com/simplelocalize/sample-github-action-project)
- [Upload Action](https://github.com/simplelocalize/upload)
- [Download Action](https://github.com/simplelocalize/download)



GitHub Actions is available!


Discover the power of `toLocaleString()` function in JavaScript. Format numbers, currencies, and units without any 3rd party localization library.
In simple words, the `toLocaleString()` method converts a number into a string, using locale format. By default, it uses locale from web browser language but you can specify it manually.   



## Syntax 
```js
number.toLocaleString(locale, options);
```

## Parameters
- `locale` (optional) - if not provided, then the method will use the host environment's current locale (e.g.: default browser language)
- `options` (optional) - object with formatting options

```js
var exampleNumber = 123456.789;

exampleNumber.toLocaleString('pl-PL');
// output: 123.456,789

number.toLocaleString('ar-EG');
// output: ١٢٣٤٥٦٫٧٨٩
```

### Limit to two significant digits
```js
const price = 123456.789;
price.toLocaleString('en-IN', { 
  maximumSignificantDigits: 2 
});
// output: 1,23,000
```

### Use default locale and custom number formatting

Put `undefined` as first parameter, to use default locale set in browser.

```js
const price = 30000.65;
price.toLocaleString(undefined, { 
  minimumFractionDigits: 2, 
  maximumFractionDigits: 2 
});
// English output: 30,000.65
// German output: 30.000,65
// French output: 30 000,65
```

### Change formatting style

Style property can have 3 different values:
- `decimal` (default)
- `currency`
- `percent`
- `unit`

In this article, we go through every style.

## Style: Currencies

Use `style` property in options object with value `currency` to format number into a string.

```js
const price = 123456.789;
price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
// output: 123.456,79 €

price.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// output: ￥123,457
```

You can adjust `currencyDisplay` property to change currency formatting. Possible values are: 
- `symbol` (default)
- `code` 
- `name`

```js
const price = 123456.789;
price.toLocaleString('de-DE', { 
  style: 'currency', 
  currencyDisplay: 'code', 
  currency: 'EUR' 
});
// output: 123.456,79 EUR

price.toLocaleString('ja-JP', { 
  style: 'currency', 
  currencyDisplay: 'name', 
  currency: 'JPY' 
});
// output: 123,457円
```



## Style: Percentages

Percentage localization is a non-trivial task in some languages. 
Not in every language, percentage sign comes after a number. 
For example, in Arabic languages.  

```js
const value = 0.767;
value.toLocaleString('pl-PL', { style: 'percent' });
// output: 77%

value.toLocaleString('ar-SA', { style: 'percent' });
// output:؜ ٧٣٪ ؜
```



[![manage translations](/blog/manage-translations-banner.jpg)](/register/)

## Style: Units

Units style is the one of the most understated JavaScript locale features. It allows you format 
number into any popular units with proper formatting for given locale.

### Example with `liter` unit

Use `unit` property in options object to set a desired unit.

```js
const value = 3;
value.toLocaleString('pl-PL', {
    style: 'unit',
    unit: 'liter'
});
// output: 3 l
```

You might also want to adjust `unitDisplay` property to show full word instead just one letter.

```js
const value = 3;
value.toLocaleString('pl-PL', {
    style: 'unit',
    unit: 'liter',
    unitDisplay: 'long'
});
// output: 3 litry
```

The shortest version you will get with `narrow` value in `unitDisplay`.

```js
const value = 3;
value.toLocaleString('pl-PL', {
    style: 'unit',
    unit: 'liter',
    unitDisplay: 'narrow'
});
// output: 3l
```

### List of JavaScript number locale units

Below, you can check all possible values for `unit` property.

<div class="units-table">

`unit` value | 
--- | 
acre
bit
byte
celsius
centimeter
day
degree
fahrenheit
fluid-ounce
foot
gallon
gigabit
gigabyte
gram
hectare
hour
inch
kilobit
kilobyte
kilogram
kilometer
liter

`unit` value | 
--- | 
megabit
megabyte
meter
mile
mile-scandinavian
milliliter
millimeter
millisecond
minute
month
ounce
percent
petabyte
pound
second
stone
terabit
terabyte
week
yard
year

</div>


[![try translation hosting for free](/blog/try-translation-hosting-for-free.jpg)](/register/)

### Kilometer per hour

You can combine two values using `per` keyword, like `X-per-Y`. For example `kilometer-per-hour`.
JavaScript will choose the best-fit localized pattern to format this compound unit.

```js
const speed = 50.2137;
speed.toLocaleString('pt-PT', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});
// output: 50,214 km/h
```

### Terabyte per gram

The `unit` property doesn't have to make sense, it accepts any combination. 😊
```js
const value = 50.2137;
value.toLocaleString('pl-PL', {
  style: 'unit',
  unit: 'terabyte-per-gram',
  unitDisplay: "long"
});
// output: 50,214 terabajta na gram
```


## Resources:
- [tc39.es/ecma402](https://tc39.es/ecma402)
- [React Localization libraries](/blog/posts/the-most-popular-react-localization-libraries/)


Number formatting in JavaScript


## Background

In this article, I will show you how to create 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 in the same language as current page.
- `getCurrentPageLanguage` Function returns language from current page path. 

## Create custom link component

In order 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 why 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()
  })
};
```

A lot of 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)


## Code repository

Full code can be found on GitHub.

[https://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.

```
## 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 example 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. 


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

Did you notice the small gray icons next to translated texts? I used DeepL integration to auto-translate those texts. 😄


How to create a multi-language website in GatsbyJS?


## Code-splitting for resources

Code-splitting is a built-in function in many code bundlers like [Webpack](https://webpack.js.org). It's used mostly to lazy load only required JavaScript code or other resources.
It helps in improving application performance by loading only required parts of the application instead fetching all resources at once.
This is a perfect solution for localization purposes to load translations for only one language instead for all of them to speed up your web application.

> Medium-sized web application with about 1000 unique translation keys can contain about 50kb translated messages for one language. If you would
> support 10 languages in your app, whole translation file could have size nearly 1 megabyte.

Learn more about [code-splitting in React](https://reactjs.org/docs/code-splitting.html).

## How to lazy load JSON file in React?

Here is the asynchronous function TypeScript, which accepts `languageKey` as a `string` and returns loaded JSON file as an JavaScript object.

```typescript
const loadJson = (languageKey: string): Promise<any> => {
  return new Promise((res, rej) => {
    import(`../assets/i18n/${languageKey}-messages.json`).then((data) => {
      res(data?.default);
    });
  });
};
```

## How to use lazy load in React app?

Here is the full example code for lazy loading translations from local JSON files. Code is written in TypeScript however it should
be easy to convert into plain JavaScript.

```typescript jsx
import {useState} from "react";

const [locale, setLocale] = useState('en-US');
const [messages, setMessages] = useState({});

// first useEffect
useEffect(() => {
  const locale = window.navigator.language;
  setLocale(locale);
}, []);

// second useEffect
useEffect(() => {
  loadJsonAsync = async () => {
    const messages = await loadJson(locale);
    setMessages(messages);
  }
  loadJsonAsync();
}, [locale])

// use your messages
```

React will invoke:
- the first `useEffect` hook only **once on every page re-render**. We are getting the language from web browser. Learn more about [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language) object.

- the second `useEffect` hook when `locale` value is changed in order to lazy load different JSON file with translations.

> You cannot invoke async functions in `useEffect` React hook, that is why we create a new `loadJsonAsync` function.

Check example [how to load translations from backend](https://github.com/simplelocalize/react-intl-simplelocalize/blob/master/src/index.js) using a standard fetch API.


## Use loaded JSON messages with IntlProvider

To use loaded JSON messages with FormatJS you can simply pass `locale` variable and `messages` object as props
to IntlProvider.

```tsx
<IntlProvider 
  locale={locale} 
  messages={messages}
>
          {children}
</IntlProvider>
```

`children` variable should contain your React component or even a whole application (eg. `<App/>`) in which you want to provide translations.


How to use code splitting with JSON files in React application



## i18next - Background
We took original post inspiration from an awesome guy called [Aryclenio Xavier Barros](https://dev.to/aryclenio), who presented 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 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, 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 looks 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 very simple 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 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 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 realtime! 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 localisation 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 synchronised 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 resrouces, 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 automatise 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 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 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 may 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 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 internationalisation 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 you 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

Customer-specific translations

Posts tagged with `developer`

GitHub Actions is available!

Number formatting in JavaScript

How to create a multi-language website in GatsbyJS?

How to use code splitting with JSON files in React application

i18next and React application localization in 3 steps

Internationalization tool for yahoo/react-intl