I18n con React – Otro Del Montón

Esta semana tuve que implementar I18n en una web básica que realice en React, para realizar esto podemos encontrar un montón de librerías disponibles en internet. Para este caso implemente react-i18next.

1.- Primero debemos instalar la librería

npm install --save i18next react-i18next

2.- En el index.js debemos importar e inicializar las librerías necesarias

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import App from './App'
import { I18nextProvider } from 'react-i18next'
import i18next from 'i18next'
import common_es from './translations/es/common.json'
import common_pt from './translations/pt/common.json'

const root = ReactDOM.createRoot(document.getElementById('root'))

i18next.init({
    interpolation: { escapeValue: false }, // React already does escaping
    fallbackLng: 'es',
    resources: {
        es: {
            common: common_es
        },
        pt: {
            common: common_pt
       }
    }
})

root.render(
    <div className='main'>
       <React.StrictMode>
           <I18nextProvider i18n={i18next}>
                <App />
           </I18nextProvider>
        </React.StrictMode>
     </div>
)

3.- Crear los archivos de traducción, la ruta de estos archivos fueron agregados en el paso anterior.

{
    "common": {
        "cuenta": "TU CUENTA",
    },
    "error": {
        "message1": "Se ha producido un error, reintente el proceso desde el store.",
        "message2": "Se ha producido un error, reintente el proceso nuevamente.",
        "message3": "Página en construcción"
    }
}

5.- En cada archivo donde necesitemos usar al I18n debemos definir la función e implementarla

...
import { useTranslation } from'react-i18next'
...
function Watch(){
   const {t} = useTranslation('common')
   ....
    return(
    ....
       {t('error.message3)}
    ....
)}

6.- Ahora queremos agregar la detección automática del idioma utilizamos el paquete i18next-browser-languagedetector, para lo cual debemos instalar el paquete necesario y modificar el index.js

i18next-browser-languagedetector

agregamos al index js los siguientes cambios

import LanguageDetector from 'i18next-browser-languagedetector'
....
i18next.use(LanguageDetector).init({
    interpolation: { escapeValue: false }, // React already does escaping
    fallbackLng: 'es',
    detection: {
        order: ['navigator']
    },
    resources: {
....