A internacionalização (i18n) é um recurso importante em aplicativos modernos, especialmente aqueles com público global.

Ao adicionar suporte a i18n, você permite que seus usuários alterem o idioma do aplicativo de acordo com suas preferências e necessidades.

Neste artigo, mostraremos como criar um aplicativo React com suporte a i18n usando a biblioteca i18next.

Instalação e configuração

Começamos instalando o pacote i18next e suas dependências:

npm install i18next react-i18next i18next-browser-languagedetector

Em seguida, configuramos o i18next em nosso aplicativo. Podemos criar um arquivo i18n.js na raiz do projeto com a seguinte configuração:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    debug: true,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

export default i18n;

Aqui, estamos inicializando o i18next com um detector de idioma baseado no navegador.

Também estamos definindo um idioma padrão ("en") para usar caso o idioma do usuário não possa ser detectado.

Criando arquivos de tradução

Agora que o i18next está configurado, podemos criar nossos arquivos de tradução.

Podemos criar uma pasta locales na raiz do projeto para armazenar os arquivos de tradução. Por exemplo, podemos ter arquivos como en.json e pt-BR.json na pasta locales.

Um arquivo de tradução típico pode ser assim:

{
  "greeting": "Hello, {{name}}!",
  "welcome": "Welcome to my app.",
  "button": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

Aqui, estamos definindo algumas mensagens de texto com placeholders ({{name}}) e também uma mensagem aninhada (button.submit).

Usando as traduções em nosso aplicativo

Agora que configuramos o i18next e criamos nossos arquivos de tradução, podemos começar a usar as mensagens traduzidas em nosso aplicativo.

Para fazer isso, podemos usar a biblioteca react-i18next.

Por exemplo, podemos ter um componente de saudação que usa uma mensagem de texto traduzida:

import React from "react";
import { useTranslation } from "react-i18next";

function Greeting({ name }) {
  const { t } = useTranslation();

  return <h1>{t("greeting", { name })}</h1>;
}

export default Greeting;

Aqui, estamos usando a função useTranslation do react-i18next para acessar as mensagens traduzidas.

Estamos passando um parâmetro name para o placeholder {{name}} em nossa mensagem de saudação.

Também podemos usar a biblioteca `react i18next` para traduzir textos em outros elementos, como botões:

import React from "react";
import { useTranslation } from "react-i18next";

function MyForm() {
  const { t } = useTranslation();

  return (
    <form>
      <button type="submit">{t("button.submit")}</button>
      <button type="button">{t("button.cancel")}</button>
    </form>
  );
}

export default MyForm;

Aqui, estamos usando a função t para acessar as mensagens traduzidas dos botões.

Quando o usuário altera o idioma do aplicativo, o texto dos botões é automaticamente atualizado.

Alterando o idioma do aplicativo

Para permitir que o usuário altere o idioma do aplicativo, podemos adicionar um seletor de idioma em algum lugar do nosso aplicativo.

Podemos criar um componente LanguageSelector que usa a função useTranslation para alterar o idioma atual:

import React from "react";
import { useTranslation } from "react-i18next";

function LanguageSelector() {
  const { i18n } = useTranslation();

  function handleChange(event) {
    i18n.changeLanguage(event.target.value);
  }

  return (
    <select value={i18n.language} onChange={handleChange}>
      <option value="en">English</option>
      <option value="pt-BR">Português (Brasil)</option>
    </select>
  );
}

export default LanguageSelector;

Aqui, estamos usando a função changeLanguage do i18next para atualizar o idioma atual do aplicativo.

Quando o usuário seleciona um novo idioma no seletor, o texto do aplicativo é automaticamente atualizado.

Conclusão

Adicionar suporte a i18n em seu aplicativo React é uma tarefa importante para permitir que seus usuários alterem o idioma do aplicativo de acordo com suas preferências e necessidades.

Usando a biblioteca i18next e a biblioteca react-i18next, você pode facilmente adicionar suporte a i18n em seu aplicativo React e fornecer uma experiência personalizada para usuários em todo o mundo.