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?

Written by

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