I18N (in-tur-na-sher-nurl-eye-zay-shen)

Move strings into common language files to allow for language changes

Example

import t, { addLanguage, setLanguage } from "@cd2/i18n"

addLanguage("en", { welcome: "Welcome", submit: "Submit" })
addLanguage("fr", { welcome: "Bienvenue", submit: "soumettre" })

// default language is "en"
t("welcome") // => 'Welcome'
setLanguage("fr")
t("submit") // => 'soumettre'

Adding a Language

Add all your languages before the application runs.

addLanguage(countryCode, dictionary)

For a large dictionary it is nice to put each language dictionary in its own file and do:

addLanguage("en", require("./locales/en"))

Setting the language

Using the setLanguage(countryCode) function will set the active dictionary.

Getting a value

To access a value do t(dictionaryKey).

The module is backed by mobx so you can observe for when the translations change. This means if you use translations in a React component then you can use @observer and the component will update automatically.

autorun(() => {
  t("welcome")
})

setLanguage("jp") // this will cause the autorun to trigger

Nested Values

Dictionaries support nested objects

addLanguage("en", {
  homePage: {
    welcome: "Welcome to the site",
  },
})

t("homePage.welcome") // => "Welcome to the site"

Using partial keys

Working with very nested structures can be a chore. So you can do this:

addLanguage("en", {
  level1: { level2: { level3a: "thing", level3b: "thing2" } },
})

const level1T = t.build("level1.level2")

level1T("level3a") // => 'thing'
level1T("level3b") // => 'thing2'

You can also build off of a partial key if needed

const l1t = t('level1')
const l2t = l1t.build('level2')
l2t('level3a') // =>'thing'

Arrays

addLanguage("en", {
  things: [
    "Thing 1",
    { foo: "2a", bar: "2b" },
    { blah: "blah black sheep" }
  ],
})

t("things.0") // => 'Thing 1'
t("things.1") // => { foo: '2a', bar: '2b' }
t("things.2.blah") // => 'blah black sheep'