i18n.md

This app uses react-i18next for internationalisation. Configuration is in i18n/i18n.ts.

Translation files are organised by feature, with a common.json file used to cover text and terminology that does not belong to one specific feature. Depending on how full these files get, we could consider splitting files into (e.g.) common_forms, common_modals, etc.

In order to minimise typos in translation keys, we've opted to strongly type react-i18next, which means there is a small amount of boilerplate code required to extend the existing interface when adding a new resource file. You can see how this is done by looking at the d.ts file in the i18n folder.

Documentation for these libraries is generally excellent, but a very quick usage overview:

1. Add key in relevant .json namespace file under /public/locales. If creating a new namespace file, add to react-i18n.d.ts to prevent typescript compiler errors.
2. In your component, use the useTranslation hook, passing an array of namespaces:

   const { t } = useTranslation();

3. Use the key in your jsx:

   <h1>{t("common:yourNewKey")}</h1>

Links

• i18next docs
• react i18next docs