Internacionalize seu app React com React Intl: Guia Completo

últimas postagens

React Intl é uma ferramenta muito utilizada que oferece componentes e funcionalidades para a internacionalização de aplicações React. A internacionalização, também conhecida como i18n, consiste na adaptação de um aplicativo a diferentes idiomas e culturas.

Com ReactIntl, torna-se simples oferecer suporte a vários idiomas e localidades no seu aplicativo React.

Instalação do React Intl

Para começar a usar React Intl, é necessário instalá-la. Isso pode ser feito através de vários gerenciadores de pacotes: npm, yarn ou pnpm.

Para instalar com npm, execute o seguinte comando no seu terminal:

 npm install react-intl

Se você preferir usar yarn, utilize este comando:

 yarn add react-intl

Utilizando a biblioteca React Intl

Após a instalação, os componentes e recursos da biblioteca React Intl podem ser integrados à sua aplicação. React Intl oferece funções que se assemelham à API Intl do JavaScript.

Entre os componentes valiosos disponibilizados pela React Intl, destacam-se o FormattedMessage e o IntlProvider.

O componente FormattedMessage é responsável por exibir as strings traduzidas no seu aplicativo, enquanto o IntlProvider fornece as traduções e informações de formatação necessárias.

Antes de usar FormattedMessage e IntlProvider, é preciso criar um arquivo de tradução. Esse arquivo contém todas as traduções para o seu aplicativo. Você pode organizar as traduções em arquivos separados por idioma e localidade ou manter todas as traduções em um único arquivo.

Por exemplo:

 export const mensagensEmFrances = {
    saudacao: "Bonjour {name}"
}
  
export const mensagensEmItaliano = {
    saudacao: "Buongiorno {name}"
}

Este exemplo de arquivo de tradução inclui dois objetos de tradução: mensagensEmFrances e mensagensEmItaliano. O marcador {name} na string de saudação pode ser substituído por um valor dinâmico em tempo de execução.

Para usar as traduções na sua aplicação, o componente raiz deve ser envolvido pelo componente IntlProvider. O IntlProvider utiliza três props do React: locale, defaultLocale e messages.

A prop locale aceita uma string que indica a localidade do usuário, enquanto defaultLocale especifica um idioma de fallback caso a localidade preferida não esteja disponível. A prop messages recebe o objeto de tradução.

Veja um exemplo de como usar o IntlProvider:

 import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { mensagensEmFrances } from "./translation";ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <IntlProvider locale="fr" messages={mensagensEmFrances} defaultLocale="en">
      <App />
    </IntlProvider>
  </React.StrictMode>
);

Neste exemplo, a localidade “fr”, a tradução mensagensEmFrances e o idioma padrão “en” são passados para o componente IntlProvider.

Você pode passar várias localidades ou objetos de tradução. O IntlProvider detecta automaticamente o idioma do navegador do usuário e aplica as traduções adequadas.

Para exibir as strings traduzidas, utilize o componente FormattedMessage. Este componente recebe uma prop id que corresponde a um ID de mensagem no objeto de mensagens.

O componente também utiliza as props defaultMessage e values. A prop defaultMessage especifica uma mensagem de fallback se não houver tradução disponível para a localidade atual, enquanto a prop values fornece valores dinâmicos para os espaços reservados nas mensagens traduzidas.

Por exemplo:

 import React from "react";
import { FormattedMessage } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedMessage
          id="saudacao"
          defaultMessage="Bom dia {name}"
          values={{ name: 'John'}}
        />
      </p>
    </div>
  );
}
export default App;

Neste código, a prop id do componente FormattedMessage utiliza a chave “saudacao” do objeto mensagensEmFrances, e a prop values substitui o espaço reservado {name} pelo valor “John”.

Formatação de números com o componente FormattedNumber

React Intl também oferece o componente FormattedNumber, que permite formatar números de acordo com a localidade atual. Este componente aceita diversas props para personalizar a formatação, como estilo, moeda e dígitos decimais mínimos e máximos.

Aqui estão alguns exemplos:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Decimal: <FormattedNumber value={123.456} style="decimal" />
      </p>
      <p>
        Percentual: <FormattedNumber value={123.456} style="percent" />
      </p>
    </div>
  );
}
export default App;

Neste exemplo, o componente FormattedNumber aceita uma prop value, especificando o número a ser formatado.

A prop style permite personalizar a aparência do número formatado. Você pode definir o valor para “decimal”, “percent” ou “currency”.

Ao definir a prop style como “currency”, o componente FormattedNumber formata o número como um valor monetário, utilizando o código especificado na prop currency:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Preço: <FormattedNumber value={123.456} style="currency" currency="USD" />
      </p>
    </div>
  );
}
export default App;

O componente FormattedNumber formata o número no código acima usando o estilo “currency” e o código de moeda USD.

Você também pode formatar números com um número específico de casas decimais usando as props minimumFractionDigits e maximumFractionDigits.

A prop minimumFractionDigits especifica o número mínimo de dígitos decimais a serem exibidos. Já a prop maximumFractionDigits especifica o número máximo de dígitos decimais.

Se um número tiver menos dígitos decimais do que o especificado em minimumFractionDigits, React Intl irá preenchê-lo com zeros. Se o número tiver mais dígitos decimais do que o especificado em maximumFractionDigits, a biblioteca irá arredondar o número.

Veja um exemplo de como usar essas props:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedNumber
          value={123.4567}
          minimumFractionDigits={2}
          maximumFractionDigits={3}
        />
      </p>
    </div>
  );
}
export default App;

Formatação de datas com o componente FormattedDate

React Intl também simplifica a formatação de datas. O componente FormattedDate oferece uma forma eficaz de formatar datas. Ele funciona de maneira similar às bibliotecas de data e hora que formatam datas, como Moment.js.

O componente FormattedDate utiliza diversas props, como value, day, month e year. A prop value recebe a data a ser formatada, e as demais props configuram a sua formatação.

Por exemplo:

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const hoje = new Date();
  return (
    <div>
      <p>
        A data de hoje é
        <FormattedDate
          value={hoje}
          day="numeric"
          month="long"
          year="numeric"
        />
      </p>
    </div>
  );
}
export default App;

Neste exemplo, a prop value usa a data atual. Ao usar as props day, month e year, especificamos que queremos o ano, mês e dia exibidos em um formato longo.

Além de day, month e year, outras props também formatam a exibição da data. Aqui estão as props e seus valores aceitos:

year: “numeric”, “2-digit”
month: “numeric”, “2-digit”, “narrow”, “short”, “long”
day: “numeric”, “2-digit”
hour: “numeric”, “2-digit”
minute: “numeric”, “2-digit”
second: “numeric”, “2-digit”
timeZoneName: “short”, “long”

Você também pode usar o componente FormattedDate para formatar e exibir a hora:

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const hoje = new Date();
  return (
    <div>
      <p>
        A hora é
        <FormattedDate
          value={hoje}
          hour="numeric"
          minute="numeric"
          second="numeric"
        />
      </p>
    </div>
  );
}
export default App;

Internacionalizando suas aplicações React para um público mais amplo

Você aprendeu como instalar e configurar a biblioteca React-Intl na sua aplicação React. React-intl simplifica a formatação de números, datas e moedas na sua aplicação React. Você pode formatar os dados com base na localidade do usuário usando os componentes FormattedMessage, FormattedNumber e FormattedDate.

Desenvolvedores React frequentemente cometem erros que podem levar a sérias consequências. Por exemplo, não atualizar o estado corretamente. É importante estar ciente desses erros comuns e corrigi-los com antecedência para evitar problemas dispendiosos.