React. Adding translations with i18next

The i18next library is probably the best option available to add translations to a website developed with ReactReact. Adding translations with i18next

🧰 Installation and configuration

yarn add react-i18next
Image for post
Image for post
Image for post
Image for post

Using the current language of the browser

Image for post
Image for post
yarn add i18next-browser-languagedetector
...
import LanguageDetector from 'i18next-browser-languagedetector';
i18n.use(LanguageDetector).
...

🔁 Translating through the i18next library

Image for post
Image for post

Nesting translations

Image for post
Image for post
t('welcome.title')

🔡 Interpolation

Image for post
Image for post
Image for post
Image for post

🔛 Access and modify the current language

const {t, i18n} = useTranslation();

🗂 Moving translations to files

yarn add i18next-http-backend
Image for post
Image for post

Translation files

{
"title": "Bienvenido {{ name }}"
}
{
"title": "Welcome {{ name }}"
}

Passing namespaces to useTranslation

Image for post
Image for post

Suspense

Image for post
Image for post

Repository

Conclusions

Do you want to read more articles like this?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store