Adding a new translation string

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 translations
• public/locales/en/auth.json - where we store the auth translations
• public/locales/en/profile.json - where we store the profile settings translations
• public/locales/en/organization.json - where we store the organization settings translations
• public/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.

1. 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:

1. Using the Trans component from ~/core/ui/Trans
2. Using the useTranslation hook from react-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');