i18n

We store the translations in the locales folder. Each language has its own file By Default list of languages is en, id and ja. The file are located in locales/languages.json, and default selected language for translation is English.

Add translation

You can add the translation by adding a new key-value pair in the default translation file.

{
    "welcome": "Welcome {{name}}",
}

You can use command that we have provided to build other translation file automatically.

npm build:locales

Or you can add manually in other transition file.

Usage

import { useTranslation } from "react-i18next"
 
 
export function Component() {
  const { t } = useTranslation()
 
  return (
    <p>{t('welcome', { name: 'Joy' })}</p>
  )
}

How customize languages

You can customize the languages in locales/languages.json. For example, add new france language.

[
    {
        "code": "en",
        "title": "English"
    },
    {
        "code": "id",
        "title": "Indonesia"
    },
    {
        "code": "ja",
        "title": "Japanese"
    },

    {
        "code": "fr",
        "title": "France"
    },
]

How change default language

To change default language you can edit on scripts/locales-generator.ts.

import IntlGen from 'intl-gen'
 
const intlGen = new IntlGen({
    directory: ['locales'],
    languages: require('../locales/languages.json'),
    filename: 'translation.json',

    default_language: 'fr',
    auto_override: true,
    skip_region: true,
    locale_directory: true,
})
 
intlGen.run()