Internationalization

We know supporting multiple languages is important for a lot of projects. That's why we implemented all texts to support translations. We are using react-i18next@11.16.9 to do exactly that.

As an example, we translated all the sidebar texts for all languages and a few other common terms used through out the application.

By default there are 6 languages supported, but you could add more by creating another .ts translation file and importing it in src\i18n\i18n.ts

1📦i18n
2  ┣ 📂translations
3  ┃ ┣ 📜ae.ts
4  ┃ ┣ 📜de.ts
5  ┃ ┣ 📜en.ts
6  ┃ ┣ 📜es.ts
7  ┃ ┣ 📜fr.ts
8  ┃ ┗ 📜zh.ts
9  ┗ 📜i18n.ts

Example Implementation

Use the example below to implement a translated text:

1import { useTranslation } from 'react-i18next';
2
3function Logo() {
4  const { t }: { t: any } = useTranslation();
5
6  return (
7    <>
8      {t('Text that will be translated here')}
9    </>
10  )};
11    
12export default Logo;