Move strings into common language files to allow for language changes


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @cd2/i18n in KB


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

Move strings into common language files to allow for language changes


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'
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(() => {

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'


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'

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.