Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

### Internationalization (i18n)

##### 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 in `react-intl/locale-data` you will have to manually add locale data

###### This is example how to add Turkish language:

1. Update `src/_metronic/layout/components/extras/dropdowns/LanguageSelectorDropdown.js`

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

2. Add `src/_metronic/i18n/messages/tr.json`

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

3. Register messages and locale data in `src/_metronic/i18n/I18nProvider.js`

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

       import deMessages from "./messages/de";
       import enMessages from "./messages/en";
       import esMessages from "./messages/es";
       import frMessages from "./messages/fr";
       import jaMessages from "./messages/ja";
       import zhMessages from "./messages/zh";
       + import trMessages from "./messages/tr";

       const allMessages = {
         de: deMessages,
         en: enMessages,
         es: esMessages,
         fr: frMessages,
         ja: jaMessages,
         zh: zhMessages
       + tr: trMessages
       };

       export default function I18nProvider({ children }) {

##### How to use

In the sample React app demo, the core parts like `left sided menu`, `topbar horizontal menu`, etc. are already implemented with the translation.

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

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

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

2. Format it with component:

       import { FormattedMessage } from "react-intl";

       export default function Hello({ name }) {
        return ;
       }

   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>
       }

   Or with HOC (Higher order component):

       import { injectIntl } from "react-intl";

       function Hello({ name, intl /* Prop injected with `injectIntl` */ }) {
        return <h3>{intl.formatMessage({ id: "HOME.HELLO" }, { name })}</h3>
       }

       export default injectIntl(Hello);