@startupjs/i18n

import { BASE_URL } from '@env'

i18n

i18n module provides with tools to localize your product.

Requirements

@startupjs/ui: >= 0.34.0 axios: * express: 4.x react: 16.9 - 17 react-native: >= 0.61.4 < 0.64.0 startupjs: >= 0.34.0

Installation & basic setup

1. Install the module

The module does not need to be installed, it comes with the startupjs module.

1. Init module on server side

import { initI18n } from '@startupjs/i18n/server'

startupjsServer({
  // ...
}, (ee, options) => {
  initI18n(ee)
})

1. Init the isomorphic model

import initI18nModel from 'startupjs/i18n/model'

export default function initOrm (racer) {
  initI18nModel(racer, i18nPageAccess)
}

where i18nPageAccess(model, next, redirect) is the /i18n page access filter.

1. Create i18n/index.js file and initialize the client-size app on it

import { initI18n, useI18nGlobalInit } from '@startupjs/i18n'

export default initI18n({
  // default language, used as the default language for translations and
  // as fallback language for `languageDetector`. Default: 'en'.
  lang: 'ru',
  // a list of supported languages
  langs: ['en', 'ru'],
  // you can use `getLangs` function instead of `langs` if you need
  // dynamically define a list of supported languages
  // `getLangs` function takes precedence over `langs` if you set both properties
  getLangs: () => {
    const langs = ... // logic that gets languages
    return langs
  },
  // detect user language to use
  // by default the function tries to find language in the paths:
  //   - $render.query.lang
  //   - _session.lang
  //   - _session.user.lang
  // by overriding this function, you can define your behavior
  // to search for a language to use
  // NOTE: the default language is used when the function finds nothing
  languageDetector: () => {
    return $user.get('language')
  }
})
export { useI18nGlobalInit }

1. Add client-side app to Root/App.js

import React from 'react'
import i18n, { useI18nGlobalInit } from 'PATH_TO_I18N_FILE_CREATED_IN_SECTION_ABOVE'

return pug`
  App(
    apps={ i18n }
    useGlobalInit=useI18nGlobalInit
  )
`

How to change the language ?

import { observer } from 'statupjs'
import { useLang, useLangs } from 'startupjs/i18n'
import { Select } from '@startupjs/ui'

export default observer(function LanguageSelect () {
  const [lang, setLang] = useLang()
  const langs = useLangs()

  return pug`
    Select(
      value=lang
      onChange={setLang}
      options=langs
    )
  `
})

Working with translations

To work correctly with translations, you need to use the function - t

import React from 'react'
import { t } from 'startupjs'
import { Span } from '@startupjs/ui'

export default function MyPage () {
  return pug`
    Div
      Span= t('backToHome', 'Back to Home')
  `
}

The first argument is the name of the tag for translations, the second is the default

Initially, words are used only for the default language, the rest of the words of other languages ​​can be changed on the page - ${BASE_URL}/i18n

Depending on the selected language, the t function will match the value in the layout