Como usar o React Intl para internacionalizar seus aplicativos React

React Intl é uma biblioteca amplamente utilizada que oferece uma coleção abrangente de componentes e ferramentas projetadas para facilitar a localização de aplicativos baseados em React. A prática de adaptar um aplicativo para acomodar vários idiomas e nuances culturais é chamada de internacionalização, que é comumente abreviada como i18n.

O ReactIntl permite a integração sem esforço de recursos de vários idiomas e localidades em um aplicativo React.

Instalando o React Intl

Para utilizar a biblioteca React Intl, é necessário realizar sua instalação. Isso pode ser feito por meio de uma variedade de gerenciadores de pacotes, como npm, yarn ou pnpm.

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

 npm install react-intl
 

Siga estes passos para instalar o pacote através do yarn:1. Abra um terminal ou uma linha de comandos no seu computador.2. Certifique-se de que tem o yarn instalado, executando o seguinte comando no terminal: yarn -v . Se o yarn não estiver instalado, pode descarregá-lo e instalá-lo a partir do sítio Web oficial ( https://yarnpkg.com/en/docs/install/ ).3. Quando o yarn estiver instalado, navegue para o diretório onde pretende instalar o pacote. Pode utilizar o comando cd para mudar de diretório. Por exemplo, se o pacote estiver localizado no diretório /Users/username/Documents/my-project/ , escreva cd /Users/username/Documents/my-project/ no terminal.4. Execute o seguinte comando no terminal

 yarn add react-intl
 

Como utilizar a biblioteca React Intl

A instalação da biblioteca React Intl permite a utilização dos seus componentes e capacidades na aplicação. A funcionalidade do React Intl é semelhante à da API JavaScript Intl.

A biblioteca React International fornece vários componentes de valor inestimável, incluindo os componentes FormattedMessage e IntlProvider .

O componente FormattedMessage serve o objetivo de apresentar cadeias de caracteres localizadas numa aplicação, enquanto o componente IntlProvider é responsável por fornecer os detalhes de tradução e formatação exigidos pela aplicação.

Antes de começar a utilizar os componentes FormattedMessage e IntlProvider para localizar a sua aplicação, é imperativo produzir um ficheiro de tradução. Este ficheiro engloba todos os recursos linguísticos necessários para o seu software. Pode criar ficheiros individuais para cada dialeto e topografia ou utilizar um ficheiro único que inclua todas as traduções.

Por exemplo:

 export const messagesInFrench = {
    greeting: "Bonjour {name}"
}
  
export const messagesInItalian = {
    greeting: "Buongiorno {name}"
}
 

messagesInFrench e messagesInItalian. É possível substituir o nome do marcador de posição na cadeia de saudação por um valor variável em tempo de execução.

locale , defaultLocale , e messages .

A prop. locale recebe uma cadeia de caracteres que designa as preferências de idioma ou região do utilizador e serve de reserva no caso de a preferência especificada não estar disponível. Entretanto, o defaultLocale determina o idioma predefinido a ser utilizado quando as preferências não estão definidas. Finalmente, a prop messages recebe um objeto de localização que contém todo o conteúdo traduzido para a aplicação.

Segue-se uma demonstração da utilização do IntlProvider :

 import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
      <App />
    </IntlProvider>
  </React.StrictMode>
);
 

O exemplo fornecido transmite a localidade francesa, as mensagens traduzidas em francês e uma localidade inglesa predefinida para o componente IntlProvider.

Ao fornecer várias instâncias de um objeto Locale ou Translation ao IntlProvider, este é capaz de identificar o idioma de navegação do cliente e utilizar as traduções correspondentes em conformidade.

Utilize o componente FormattedMessage para apresentar cadeias de caracteres traduzidas na sua aplicação, fornecendo-lhe o ID da mensagem como a propriedade id, que corresponde ao mesmo identificador no objeto messages.

O componente também aceita duas props, a “defaultMessage” e a “values”. A primeira serve de mensagem de reserva quando não está disponível uma tradução adequada para a localidade atual, enquanto a segunda fornece conteúdo dinâmico para preencher os lugares do texto localizado.

Por exemplo:

 import React from "react";
import { FormattedMessage } from "react-intl";

function App() {
  return (
    <div>
      <p>
        <FormattedMessage
          id="greeting"
          defaultMessage="Good morning {name}"
          values={{ name: 'John'}}
        />
      </p>
    </div>
  );
}

export default App;
 

O trecho de código mencionado acima utiliza a chave “greeting” do objeto “messagesInFrench” dentro do componente “FormattedMessage”. A propriedade “values” substitui o marcador de posição “{name}” pelo valor “John”.

Formatando números com o componente FormattedNumber

O React International oferece um componente FormattedNumber que permite a personalização da formatação de números de acordo com a localidade predominante. Este componente está equipado com vários atributos, incluindo estilo, moeda, dígitos de fração mínima e máxima, entre outros, para permitir aos utilizadores personalizar a apresentação de valores numéricos.

Eis 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>
        Percent: <FormattedNumber value={123.456} style="percent" />
      </p>
    </div>
  );
}

export default App;
 

A instância acima mencionada utiliza o componente FormattedNumber do utilitário, que está equipado com uma propriedade de valor que especifica o numeral a ser formatado.

Pode utilizar a propriedade de estilo conhecida como “prop” para adaptar a apresentação visual de um valor formatado numericamente. Esta propriedade pode ser definida para ser apresentada como um símbolo decimal, de percentagem ou de moeda.

Ao definir a propriedade de estilo como “currency”, o componente FormattedNumber formata o valor numérico utilizando o código estipulado pela propriedade “currency”:

 import React from "react";
import { FormattedNumber } from "react-intl";

function App() {
  return (
    <div>
      <p>
        Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
      </p>
    </div>
  );
}

export default App;
 

O componente FormattedNumber foi concebido para formatar valores numéricos utilizando o estilo e o código de moeda especificados. Neste caso particular, utiliza o sinal de dólar ($) e o código de moeda USD para representar valores financeiros em dólares dos Estados Unidos.

Também pode formatar valores numéricos com um número predefinido de casas decimais, utilizando as propriedades minimumFractionDigits e maximumFractionDigits .

A propriedade minimumFractionDigits determina o número mínimo de fracções que deve ser mostrado, enquanto a propriedade maximumFractionDigits define o número máximo de fracções a mostrar.

Quando um número é apresentado e o seu número de dígitos fraccionários é inferior ao valor mínimo predeterminado de dígitos fraccionários, denotado como minimumFractionDigits , a biblioteca React Intl aumentará o número adicionando zeros após o ponto decimal para atingir a contagem necessária de dígitos fraccionários. Inversamente, se o número possuir mais dígitos fraccionários do que o limite máximo predeterminado, denotado como maximumFractionDigits , a biblioteca arredondará o número para o inteiro mais próximo.

Aqui está uma demonstração de como utilizar essas propriedades:javascriptimport React, { useState } from ‘react’;function MyComponent() { const [count, setCount] = useState(0); return (

Você clicou {count} vezes

setCount(count + 1)}> Clique em mim

);}export default MyComponent;

 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;
 

Formatando datas com o componente FormattedDate

A utilização do React Intl permite a formatação uniforme e legível de datas por meio da implementação de seu componente FormattedDate. Esse componente opera de maneira semelhante a outras bibliotecas de data e hora, como Moment.js, e oferece um método eficiente para a formatação de datas.

O componente FormattedDate é um elemento versátil que requer várias propriedades, incluindo, entre outras, a propriedade ‘value’, que designa a data a ser formatada, e as propriedades ‘day’, ‘month’ e ‘year’, que são utilizadas para configurar a apresentação da referida data.

Por exemplo:

 import React from "react";
import { FormattedDate } from "react-intl";

function App() {
  const today = new Date();

  return (
    <div>
      <p>
        Today's date is
        <FormattedDate
          value={today}
          day="numeric"
          month="long"
          year="numeric"
        />
      </p>
    </div>
  );
}

export default App;
 

A presente instância utiliza a data atual como propriedade de valor e, ao utilizar as propriedades dia, mês e ano, permite ao utilizador optar por apresentar o ano, o mês e o dia num formato longo.

Para além dos elementos de tempo acima mencionados, vários parâmetros adicionais contribuem para a apresentação de uma data. Segue-se uma enumeração destes parâmetros com os respectivos valores aceitáveis:

⭐ ano : “numérico”, “2 dígitos”

O campo do mês é do tipo “numérico”, com um formato que consiste em dois dígitos, e é considerado como “estreito”, “curto” ou “longo”.

⭐ dia : “numérico”, “2 dígitos”

⭐ hora : “numérico”, “2 dígitos”

⭐ minuto : “numérico”, “2 dígitos”

⭐ segundo : “numérico”, “2 dígitos”

⭐ timeZoneName : “short”, “long”

 import React from "react";
import { FormattedDate } from "react-intl";

function App() {
  const today = new Date();

  return (
    <div>
      <p>
        The time is
        <FormattedDate
          value={today}
          hour="numeric"
          minute="numeric"
          second="numeric"
        />
      </p>
    </div>
  );
}

export default App;
 

Internacionalize seus aplicativos React para um público mais amplo

A instalação e a configuração da biblioteca React-Intl em um aplicativo React foram expostas. Esta biblioteca facilita a formatação simples de valores numéricos, de data e monetários dentro da referida aplicação, em relação à localidade especificada, utilizando os componentes FormattedMessage, FormattedNumber e FormattedDate.

O erro na atualização do estado é um problema comummente encontrado entre os programadores React que pode resultar em repercussões significativas se não for resolvido prontamente. Por isso, é imperativo que os profissionais desta área se mantenham informados sobre esses erros típicos e os rectifiquem o mais cedo possível para evitar despesas indevidas.