A seguir, importe o componente Suspense na parte superior do arquivo:

 import React, {Suspense} de"react";

O prop fallback aceita uma string de texto ou qualquer elemento React que gostaríamos de renderizar. Salve o arquivo e o aplicativo deve funcionar.

Se alterarmos a propriedade lng no arquivo de configuração para ar ou qualquer um dos idiomas suportados, veremos a tradução no frontend.

Agora que cobrimos os fundamentos, vamos traduzir rapidamente o conteúdo da outra página.

Interpolação, formatação e pluralização

Até o momento, vimos como traduzir uma string de texto simples. Conforme mencionado anteriormente, a localização vai além da tradução entre idiomas. As diferenças culturais devem ser consideradas.

A partir de agora, abordaremos como formatar e traduzir uma mensagem rica em texto. Se olharmos para nosso aplicativo, veremos que temos números, a data e a localização da moeda para formatar para diferentes localidades.

Também temos uma contagem numérica que aumenta conforme os usuários clicam em um botão e deve formatar o texto para respeitar a pluralização.

Interpolação

Quando o texto tem um número ou data que deve ser formatado, usamos interpolação. Esta é uma das funcionalidades que permite inserir valores em nossas traduções.

Usando o texto de frontend, “Formatting 3.000 no idioma selecionado,” iremos interpolar “3000” no texto.

No arquivo en/translation.json , adicione ao JSON:

 { ... "formatNumber":"Formatando {{num}} no idioma selecionado"
}

Observe como estamos substituindo o número por um espaço reservado.

No arquivo árabe, adicione este:

 { ... "formatNumber":"تنسيق {{num}} في اللغة المختارة"
}

Certifique-se de adicionar traduções para os outros locais suportados e salvar todos os arquivos.

A seguir, usaremos a função de tradução, t () , para traduzir e formatar nossa mensagem com base no idioma atual.

Em components/Content.js , encontre este elemento:

 
 Formatando 3.000 no idioma selecionado 

Substitua por este:

 
 {t ("formatNumber", {num: 3000})} 

Aqui, estamos passando o número a interpolar como o segundo argumento da função t () . O num usado na propriedade do objeto deve corresponder ao espaço reservado nos arquivos de tradução-em nosso caso, {{num}} .

Salve o arquivo e teste o trabalho.

Se alterarmos a propriedade lng no arquivo i18n.js para ar , teremos isto:

Em seguida, devemos formatar o número interpolado com base no idioma atual.

Formatação

i18next não suporta a formatação de números ou datas por padrão. Mas, ele nos permite formatar usando bibliotecas como moment.js, Luxon e date-fns ou por meio da API Intl.

Neste projeto, vamos usar o Intl API para formatar para nós; é simples e funciona bem com o i18next. Esta API Intl por meio de seu objeto Intl nos fornece os construtores necessários.

Para formatarmos, precisamos apenas dos construtores Intl.NumberFormat () e Intl.DateTimeFormat () .

Para formatar o número que interpolamos anteriormente, devemos adicionar outra opção de tradução chamada interpolação dentro da configuração e definir uma função que lida com a formatação.

A configuração agora se parece com isto:

 i18n .use (backend) .use (initReactI18next) .iniciar({ lng:"ar", fallbackLng:"en", interpolação: { formato: (valor, formato, lng)=> { if (formato==="número") { retornar novo Intl.NumberFormat (lng).format (valor); } }, }, });

O foco está na função formato . Lá, definimos uma condição que verifica se o valor que precisamos formatar é um número. Devemos então retornar o valor formatado no idioma atual usando a API Intl.

Para garantir que a condição retorne verdadeiro, devemos atualizar o espaço reservado, {{}} , em nossa tradução para incluir o número .

Para inglês, atualize en como o seguinte:

"formatNumber":"Formatando {{num, número}} no idioma selecionado"

Para árabe, atualize ar da seguinte forma:

"formatNumber":"تنسيق {{num, number}} في اللغة المختارة"

Atualize os arquivos de tradução para os outros locais suportados também e salve-os.

Agora, o aplicativo deve ter a seguinte aparência:

Usando a mesma abordagem, vamos traduzir o outro texto no arquivo components/Content.js e formatar a data e a colocação da moeda.

Atualize o en/translation.json para incluir o seguinte:

 { ... "formatCurrency":"Exibindo {{price, currency}} no local selecionado", "formatDate":"Data de hoje: {{hoje, data}}"
}

No ar/translation.json , adicione:

 { ... "formatCurrency":"عرض {{preço, moeda}} دولارًا في اللغة المحددة", "formatDate":"تاريخ اليوم: {{hoje, data}}"
}

Mais uma vez, adicione traduções para os outros locais suportados.

Depois disso, atualize o arquivo components/Content.js para acessar as traduções:

 const Content=()=> { //... Retorna ( 
 
 {t ("texto de boas-vindas")} 
 
 {t ("formatCurrency", {price: 69,99})} 
 
 {t ("formatNumber", {num: 3000})} 
 
 {t ("formatDate", {today: new Date ()})} 
 
 );
};

Finalmente, no arquivo i18n.js , atualize a função formato :

 formato: (valor, formato, lng)=> { //... if (format==="data") { retornar novo Intl.DateTimeFormat (lng).format (valor); } if (formato==="moeda") { return new Intl.NumberFormat (lng, { estilo:"moeda", moeda:"USD", }). formato (valor); }
},

Neste arquivo, estamos usando o construtor Intl.DateTimeFormat () para formatar a data. Observe como estamos fornecendo opções adicionais para Intl.NumberFormat () para formatar a moeda. Encontre a lista de códigos de moeda aqui .

Salve todos os arquivos e recarregue o front-end.

Por padrão, o i18next escapa valores para reduzir os ataques de cross-site scripting (XSS), vistos na imagem abaixo.

Mas, um aplicativo React é protegido por XSS. Portanto, vamos evitar que o i18next escape do valor adicionando escapeValue na interpolação e atribuindo um valor false .

 interpolação: { formato: (valor, formato, lng)=> { //... }, escapeValue: false//reage já a cofres de xss
},

Salve e recarregue o front-end e ele deve funcionar.

Pluralização

No momento, em nosso aplicativo, clicar no botão de contagem de front-end não altera a declaração de contagem. Por exemplo, quando a contagem é singular, a declaração deve ser “Você clicou 1 vez.”

Então, vamos começar a adicionar traduções aos vários arquivos de tradução. Atualize o arquivo en/translation.json para incluir o seguinte:

 { ... "clickCount":"Você clicou {{count}} vez", "clickCount_plural":"Você clicou {{count}} vezes"
}

Aqui, estamos substituindo a contagem dinâmica na mensagem por um marcador. Esta variável de espaço reservado deve ser chamada de contagem . Também estamos fornecendo o equivalente no plural de nossa tradução.

Para informar a seguir se devemos renderizar a mensagem no singular ou no plural, devemos passar a chave clickCount , sem _plural , junto com o valor de contagem dinâmica para o t função na renderização.

Se a contagem for 1 , a mensagem no singular renderiza, caso contrário, renderiza no plural.

Vamos atualizar os arquivos de tradução para as outras localidades. Para o arquivo ja/translation.json , adicione o seguinte:

 { ... "clickCount":"{{count}} 回 ク リ ッ ク し ま し た"
}

Observe que não estamos adicionando o equivalente no plural. Isso ocorre porque o japonês ( ja ) tem apenas uma forma no plural. Consulte a forma plural para cada idioma .

Como o inglês, o francês tem duas formas plurais. No entanto, algumas das palavras têm a mesma forma no singular e no plural.

Por exemplo, se traduzirmos a mensagem para o francês, teremos o seguinte no arquivo fr/translation.json :

 { ... "clickCount":"Vous avez cliqué {{count}} fois", "clickCount_plural":"Vous avez cliqué {{count}} fois"
}

Uma vez que ambos têm a mesma forma, podemos ignorar o segundo e ter este:

 { ... "clickCount":"Vous avez cliqué {{count}} fois",
}

Para árabe, existem cinco formas plurais ao lado do singular, então devemos definir todas as formas, assim:

 clickCount_0;//c=0 ou seja, zero
clickCount_1;//c=1 ou seja, singular
clickCount_2;//c=2 ou seja, dois
clickCount_3;//3 <=c <=10 ou seja, poucos
clickCount_4;//11 <=c <=99 ou seja, muitos
clickCount_5;//>=100 ou seja, outro

Devemos manter o mesmo nome de chave, que, em nosso caso, é clickCount , assim como usamos nos outros arquivos de tradução.

O i18next seleciona automaticamente o formulário adequado com base na contagem. Quando a contagem é 0 , 1 ou 2 , o i18next renderiza as traduções atribuídas às suas respectivas chaves clickCount_0 , clickCount_1 e clickCount_2 .

No entanto, quando a contagem está entre 3 e 10 , o i18next renderiza traduções atribuídas a clickCount_3 , 11 para 99 renderiza traduções atribuídas a clickCount_4 , e uma contagem em 100 ou acima renderiza traduções atribuídas a clickCount_5 .

Se traduzirmos a string “Você clicou {{n}} vezes” para o árabe, onde “n” é um número de 0 a infinito, podemos usar o Google Translate para obter o seguinte:

 { ... "clickCount_0":"لقد نقرت {{count}} مرة", "clickCount_1":"لقد نقرت مرة واحدة", "clickCount_2":"لقد نقرت مرتين", "clickCount_3":"لقد نقرت {{count}} مرات", "clickCount_4":"لقد نقرت {{count}} مرة", "clickCount_5":"لقد نقرت {{count}} مرة"
}

Agora, salve os arquivos.

Abra o arquivo components/Footer.js para acessar a função t . Primeiro, importe o gancho de tradução, assim:

 import {useTranslation} de"react-i18next";

Above the return statement, access the t function from the Hook:

const { t }=useTranslation();

Now, we can use it to replace the text to translate it; so, find the following element:

You've clicked {count} times

Then, replace it with this:

{t("clickCount", { count: count })}

Save the file, reload the frontend, and test the project.

The Trans component

To translate a string formatted with the strong, i, or br element, or to include a link, we must use the Trans component from i18next.

If we open the components/Footer.js file, we can translate and format the following element:

 Let's  click the button  below:

The logic here is simple; we will break the p element text into nodes and assign an index number to them, like so:

 Let's--> index 0  click the button --> index 1 below:--> index 2

Next, import the Trans component in the Footer.js file to wrap the text:

//... import { useTranslation, Trans } from"react-i18next"; const Footer=()=> { //... return ( 
 {/* Footer content here */} p  Let's  click the button  below:  
 {/*... */} 
 );
}; //...

Notice we’ve added the i18nKey prop to the Trans component. We will use its value as a key in the translation files.

We can now use this index number as a placeholder to reference the inner element in the translation files.

In the en/translation.json file, we have the following:

{ ... "clickButtonText":"Let's <1>click the button below:"
}

The key is coming from the Trans i18nKey prop.

In the ar/translation.json file, we have the following:

{ ... "clickButtonText":"دعنا <1> انقر فوق الزر  أدناه:"
}

Update the other supported translation files, save them, and reload the frontend and see the changes.

Translate button text

To translate the button text, let’s replace the text in the component/Footer.js file with the t function:

{t("click")}

Then, update the translation files to include the key-value pair.

In the en/translation.json file, add:

"click":"Click here"

In the ar/translation.json file, add:

"click":"انقر هنا"

Use Google Translate to update the other translation files.

Translate menus items

For translating the menu items, start by adding this to the en/translation.json file:

"menu": { "aboutProject":"About the project", "contactUs":"Contact us"
}

Then, add this to ar/translation.json file:

"menu": { "aboutProject":"حول المشروع", "contactUs":"اتصل بنا"
}

Again, use Google Translate to update the other translation files and save them.

Next, open the components/Header.js file and import the useTranslation at the top:

import { useTranslation } from"react-i18next";

Then, use the t function to translate the menu titles:

import { useTranslation } from"react-i18next"; const Header=()=> { const { t }=useTranslation(); const menu=[ { title: t("menu.aboutProject"), //... }, { title: t("menu.contactUs"), //... }, ]; return ( //... );
}; //...

If we save the file and reload the frontend, we’ll see the menu items and all the page content properly translated.

Detecting a user’s language

We must provide an option for users to switch languages in the frontend while persisting the selected locale in the browser storage. This enables content to display in the preferred language on a subsequent visit.

i18next provides a plugin for this, so let’s install it using this command:

npm install i18next-browser-languagedetector

Once installed, import and add the plugin to the configuration file:

//...
import LanguageDetector from"i18next-browser-languagedetector"; i18n //... .use(LanguageDetector) .init({ fallbackLng:"en", detection: { order: ["path","localStorage","htmlTag","cookie"], caches: ["localStorage","cookie"],//cache user language on }, interpolation: { //... }, }); export default i18n;

In the setup, we removed the lng property since the app now depends on the plugin to detect the current language. In the detection property, we’ve specified the order to detect the user’s language.

The first item in the order has the highest priority and decreases in that order. This means that the plugin first checks the path, followed by localStorage, and so on.

Now, we can access the locale content from the URL path http://localhost:3000/ar.

We must specify the path as the first item in the array to access the locale content through the path. However, note the user’s locale is still detected from the other specified storage.

Save the file and reload the frontend; test the project by passing a locale to the URL path http://localhost:3000/ar.

Creating a language switcher

To create a language switcher, begin by opening the components/Header.js file and adding the supported languages above the return statement:

//Languages
const languages=[ { name:"English", code:"en"}, { name:"日本語", code:"ja"}, { name:"Français", code:"fr"}, { name:"العربية", code:"ar"},
];

Next, find this element in the JSX:

 {/* Language switch dropdown here */}

Update it so we have the following:

 {/* Language switch dropdown here */} Languages{""}  {languages.map(({ name, code })=> (  {name}  ))} 

Save the file. The code should be self-explanatory because it is basic React.

The switcher should now display in the frontend, although it is not working yet. We need to make the dropdown element a controlled component.

All we need to do is to pass a value prop and onChange to the select element:

 {/*... */}

The value prop takes the current locale while onChange triggers a function that updates the locale.

We can get the current locale value from the storage by installing a package called js-cookie. This allows us to get the locale string from the cookie:

npm install js-cookie

Next, import the Cookies object at the top of the Header.js file:

import Cookies from"js-cookie";

Then, add this code above the return statement:

const currentLocale=Cookies.get("i18next") ||"en";

This package uses the get() method to read a cookie from the storage and accepts the name of the cookie.

For the i18next framework, the cookie name is i18next. We can find this name in the storage cookies of the browser devtools.

Next, define a state that takes the current locale and assigns it to the value prop of our dropdown element.

Still in the Header.js file, import the useState at the top of the file:

import { useState } from"react";

Then, define a language variable and pass in the current locale via the useState Hook.

Add the following above the return statement:

const [language, setLanguage]=useState(currentLocale);

Now that the language has the current locale, we can pass it to the value prop:

 {/*... */}

Notice we’ve also added the handleChangeLocale handler to trigger an update.

Let’s quickly create it. Add this code above the return statement:

const handleChangeLocale=(e)=> { const lang=e.target.value; setLanguage(lang);
};

The code is updating the language dropdown to the user’s selection. We must go a step further and update the application language.

As mentioned earlier, the i18n instance is required to change the language. Now, we can use it to grab the changeLanguage() API to accept the user’s selected language.

Like the t function, we also have access to the i18n instance from the useTranslation() Hook.

So, update the Hook to include the i18n:

const { t, i18n }=useTranslation();

Then, use it in the handleChangeLocale handler:

const handleChangeLocale=(e)=> { const lang=e.target.value; setLanguage(lang); i18n.changeLanguage(lang);
};

Save and test the application.

Rendering Arabic content right to left

If we temporarily open the browser devtools and add a dir="rtl" to the body element, we’ll see the content displayed from right to left. In our app, we need to locate the body element and add the dir attribute when the page loads.

Update the Arabic language in the languages array to include its direction in the components/Header.js file:

const languages=[ //... { name:"العربية", code:"ar", dir:"rtl"},
];

After that, add the following code above the return statement:

const currentLangObj=languages.find((lang)=> lang.code===currentLocale); useEffect(()=> { document.body.dir=currentLangObj.dir ||'ltr'
}, [currentLangObj])

Import the useEffect
Hook at the top of the file:

import { useState, useEffect } from"react";

The find() method allows us to get the language object for the selected locale. In this object, we have access to the Arabic direction, which we assign to the body.dir attribute when the page loads.

Translating the application title

Here, we will add translations for our app title and the Languages text beside the dropdown.

In the en/translation.json, add:

{ ... "app_title":"React-i18next tutorial", "languages":"Languages" }

Add translations for the other supported locales and save all the files.

Back to the components/Header.js file, update useEffect to include the translation function for the app title:

useEffect(()=> { document.body.dir=currentLangObj.dir ||"ltr"; document.title=t("app_title");
}, [currentLangObj, t]);

Finally, locate this element within the JSX:

Languages

Replace it with the translation function:

{t('languages')}

Save the file and test the app. Everything should work as expected.

Congratulations! We’re done!

Conclusão

I’m excited you are here. You’ve learned a lot in regards to using the i18next framework in a React application. We covered almost all the use cases needed to utilize i18next. Now, you know how to use it to localize a React application.

If you enjoyed this guide, please share it around the web. And if you have questions or contributions, please let me know through the comment section.

You can see the entire i18next project source code in this GitHub repository.

The post React localization with i18next appeared first on LogRocket Blog.