Overview

We're using react-intl for internationalization, check official documentation and examples.

How to add a new language

Note: if there are no locale data for your new language inreact-intl/locale-data you will have to manually add locale data

This is example how to add Turkish language:

1. Update src/_zeus/partials/layout/header-menus/Languages.tsx

   const languages = [
   {
       lang: "en",
       name: "English",
       flag: toAbsoluteUrl("media/flags/united-states.svg")
   },
   + {
       +   lang: "tr",
       +   name: "Turkish",
       +   flag: toAbsoluteUrl("media/flags/turkey.svg")
   + },
   {
   

2. Add src/_zeus/i18n/messages/tr.json

   + {
       +    "TRANSLATOR.SELECT": "Dilinizi seçin",
       +    "MENU.NEW": "yeni",
       +    "MENU.ACTIONS": "Eylemler",
       +    "MENU.CREATE_POST": "Yeni Gönderi Oluştur",
   

Register messages and locale data in `src/_zeus/i18n/I18nProvider.tsx`

```jsx
import * as ja from "react-intl/locale-data/ja";
import * as zh from "react-intl/locale-data/zh";
import "@formatjs/intl-relativetimeformat/locale-data/tr";

import enMessages from "./messages/en.json";
import esMessages from "./messages/es.json";
import trMessages from "./messages/tr.json";
                
const allMessages = {
  en: enMessages,
  es: esMessages,
+ , tr: trMessages
};
```

How to use

The translator understands flat JSON object as defined insrc/_zeus/i18n/messages/en.json. This means that you can have a translation that looks like this:

1. Add translation to src/_zeus/i18n/messages/en.json:

   {"HOME.HELLO": "Hello, {name}!"}
   

2. Format it with component:

   import { FormattedMessage } from "react-intl";
                   
   export default function Hello({ name }) {
    return ;
   }
   

3. Or with hook:

   import { useIntl } from "react-intl";
                   
   export default function Hello({ name }) {
    const intl = useIntl();             
    return <h3>{intl.formatMessage({ id: "HOME.HELLO" }, { name })}</h3>
   }