React. Añadiendo traducciones con i18next

La librería i18next probablemente sea la mejor opción disponible para añadir traducciones a una web desarrollada con React

🧰 Instalación y configuración

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

Empleando el idioma actual del navegador

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

🔁 Traduciendo por medio de la librería i18next

Image for post
Image for post

Anidar traducciones

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

🔡 Interpolación

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

🔛 Acceder al idioma actual y modificarlo

const {t, i18n} = useTranslation();

🗂 Llevando las traducciones a archivos

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

Archivos de traducciones

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

Pasando namespaces a useTranslation

Image for post
Image for post

Suspense

Image for post
Image for post

Repositorio

Conclusiones

¿Quieres recibir más artículos como este?

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