Skip to content

Internationalization

Auron Vila edited this page Apr 29, 2024 · 2 revisions

/src/locales/locales.ts

The app comes with languages like es(spanish), en(english), tr(turkish). If you want to add a language just keep adding the json of the language and update the config in the locales.ts. You can notice the errors folder, the folder was created if you want to configure the error handlig in the app and show errors based on the error code(which comes from the backend) also show the error in the selected language. You can update the language of the app by dispatching(a special function in redux) and calling the setLang function with the updated language.

Example:

  const dispatch = useAppDispatch()
  
  dispatch(setLang('tr'))

The default language of the app is en(English) and it can be changed from app.config.ts.

To make a string dynamic by a language you need to add a key to each language's json that key will represent the string that you want to make dynamic.

Example en.json:

{
  "nav.dashboard": "Dashboard"
}

Example tr.json:

{
  "nav.dashboard": "Panel"
}

After you've added the key in the json file you can use the value of the key in your app like this:

  const {t} = useTranslation()

  t(submenuItem.translateKey) // if language is en it will be Dashboard, if the language is tr it will be Panel.

You can apply this method for errors too.

Clone this wiki locally