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.14.2 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 .js translation file and importing it in src\i18n\i18n.js

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

Example Implementation

Use the example below to implement a translated text:

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