Adding a new translation string
Adding new translations to your application is easy. This guide will show you how to add a new translation string to your application.
The translations of the application are stored at public/locales/<en>
.
We have various translations languages JSON files by default (only in English):
public/locales/en/common.json
- where we store the common translationspublic/locales/en/auth.json
- where we store the auth translationspublic/locales/en/profile.json
- where we store the profile settings translationspublic/locales/en/organization.json
- where we store the organization settings translationspublic/locales/en/subscription.json
- where we store the subscription settings translations
You can keep adding translations to these files if you wish, or create new bundles for your translations.
Adding a new translation string
Let's say we want to add a new translation string to the common.json
file.
- Open the
public/locales/en/common.json
file and add the new translation string:
{ "new_translation_string": "This is a new translation string"}
You can then reference this key in your application like this:
- Using the
Trans
component from~/core/ui/Trans
- Using the
useTranslation
hook fromreact-i18next
For example, using the Trans
component:
<Trans i18nKey="common:new_translation_string" />
or using the useTranslation
hook:
const { t } = useTranslation();const newTranslationString = t('common:new_translation_string');