Para o público mais amplo possível, seu aplicativo deve se comunicar em vários idiomas. Descubra como tornar essa tarefa menos assustadora.

React Intl é uma biblioteca popular que fornece um conjunto de componentes e utilitários para internacionalizar aplicativos React. A internacionalização, também conhecida como i18n, é o processo de adaptação de um aplicativo a diferentes idiomas e culturas.

Você pode suportar facilmente vários idiomas e localidades em seu aplicativo React com ReactIntl.

Instalando o React Intl

Para usar a biblioteca React Intl, você deve primeiro instalá-la. Você pode fazer isso com mais de um gerenciador de pacotes: npm, fio ou pnpm.

Para instalá-lo com npm, execute este comando no seu terminal:

npm install react-intl

Para instalá-lo usando yarn, execute este comando:

yarn add react-intl

Como usar a biblioteca React Intl

Depois de instalar a biblioteca React Intl, você pode usar seus componentes e recursos em seu aplicativo. React Intl tem funções semelhantes ao API Internacional JavaScript.

instagram viewer

Alguns componentes valiosos oferecidos pela biblioteca React Intl incluem o Mensagem formatada e IntlProvider componentes.

O componente FormattedMessage exibe strings traduzidas em seu aplicativo, enquanto o componente IntlProvider fornece as traduções e informações de formatação para seu aplicativo.

Você deve criar um arquivo de tradução antes de começar a usar os componentes FormattedMessage e IntlProvider para traduzir seu aplicativo. Um arquivo de tradução contém todas as traduções para seu aplicativo. Você pode criar arquivos separados para cada idioma e localidade ou usar um único arquivo para conter todas as traduções.

Por exemplo:

exportarconst mensagensEmFrancês = {
 saudações: "Bonjour {nome}"
}

exportarconst mensagensEmItaliano = {
 saudações: "Buongiorno {nome}"
}

Este exemplo de arquivo de tradução contém dois objetos de tradução: mensagensEmFrancês e mensagensEm italiano. Você pode substituir o espaço reservado {nome} no saudações string em tempo de execução com um valor dinâmico.

Para usar as traduções em seu aplicativo, você deve agrupar o componente raiz do seu aplicativo com o IntlProvider componente. O componente IntlProvider leva três adereços de reação: localidade, defaultLocale, e mensagens.

A propriedade locale aceita uma string que especifica a localidade do usuário, enquanto defaultLocale especifica um fallback se a localidade preferencial do usuário não estiver disponível. Por fim, a prop de mensagens aceita um objeto de tradução.

Aqui está um exemplo mostrando como você pode usar o IntlProvider:

importar Reagir de"reagir";
importar ReactDOM de"react-dom/client";
importar Aplicativo de"./Aplicativo";
importar { Provedor Internacional } de"react-intl";
importar { mensagensEmFrancês } de"./tradução";
ReactDOM.createRoot(documento.getElementById("raiz")).render(

"fr" mensagens={messagesInFrench} defaultLocale="en">

 </IntlProvider>
 </React.StrictMode>
);

Este exemplo passa o fr local, o mensagensEmFrancês tradução e um padrão pt local para o IntlProvider componente.

Você pode passar mais de um locale ou objeto de tradução, e o IntlProvider detectará automaticamente o idioma do navegador do usuário e usará as traduções apropriadas.

Para exibir strings traduzidas em seu aplicativo, use o Mensagem formatada componente. O Mensagem formatada componente leva um eu ia prop correspondente a um ID de mensagem no objeto de mensagens.

O componente também leva um mensagem padrão e valores suporte. O mensagem padrão prop especifica uma mensagem de fallback se uma tradução não estiver disponível para o local atual, enquanto o valores prop fornece valores dinâmicos para os espaços reservados em suas mensagens traduzidas.

Por exemplo:

importar Reagir de"reagir";
importar { FormattedMessage } de"react-intl";
funçãoAplicativo() {
retornar (





 id ="saudações"
 defaultMessage="Bom dia {nome}"
 valores={{ nome: 'John'}}
 />
 </p>
 </div>
 );
}


exportarpadrão Aplicativo;

Neste bloco de código, o eu ia adereço do Mensagem formatada componente usa o saudações chave do mensagensEmFrancês objeto, e o valores suporte substitui o {nome} espaço reservado com o valor "John".

Formatando números com o componente FormattedNumber

React Intl também fornece o Número formatado componente que você pode usar para formatar números com base na localidade atual. O componente aceita vários adereços para personalizar a formatação, como estilo, moeda e dígitos de fração mínima e máxima.

aqui estão alguns exemplos:

importar Reagir de"reagir";
importar { Número formatado } de"react-intl";
funçãoAplicativo() {
retornar (





 Decimal: <Número formatadovalor={123.456}estilo="decimal" />
 </p>



 Por cento: <Número formatadovalor={123.456}estilo="por cento" />
 </p>
 </div>
 );
}


exportarpadrão Aplicativo;

Este exemplo usa o Número formatado componente que aceita um valor prop especificando o número que você deseja formatar.

Usando o estilo prop, você pode personalizar a aparência do número formatado. Você pode definir o estilo suporte para decimal, por cento, ou moeda.

Quando você definir o estilo suporte à moeda, o Número formatado componente formata o número como um valor de moeda usando o código especificado no moeda suporte:

importar Reagir de"reagir";
importar { Número formatado } de"react-intl";
funçãoAplicativo() {
retornar (





 Preço: <Número formatadovalor={123.456}estilo="moeda"moeda="USD" />
 </p>
 </div>
 );
}


exportarpadrão Aplicativo;

O Número formatado componente formata o número no bloco de código acima usando o moeda estilo e o USD Código da moeda.

Você também pode formatar números com um número específico de casas decimais usando o mínimoFractionDigits e maximumFractionDigits adereços.

O mínimoFractionDigits prop especifica o número mínimo de dígitos de fração a serem exibidos. Em contraste, o maximumFractionDigits prop especifica o número máximo de dígitos de fração.

Se um número tiver menos dígitos fracionários do que o especificado mínimoFractionDigits, React Intl irá preenchê-lo com zeros. Se o número tiver mais dígitos fracionários do que o especificado maximumFractionDigits, a biblioteca arredondará o número para cima.

Aqui está um exemplo mostrando como você pode usar esses adereços:

importar Reagir de"reagir";
importar { Número formatado } de"react-intl";
funçãoAplicativo() {
retornar (





 valor={123.4567}
 mínimoFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}


exportarpadrão Aplicativo;

Formatando datas com o componente FormattedDate

Você pode formatar datas de maneira consistente e fácil de ler usando o React Intl. O Data formatada fornece uma maneira simples e eficaz de formatar datas. Funciona de forma semelhante a bibliotecas de data e hora que formatam datas, como Moment.js.

O componente FormattedDate usa muitos adereços, como valor, dia, mês, e ano. A propriedade value aceita a data que você deseja formatar e as outras props configuram sua formatação.

Por exemplo:

importar Reagir de"reagir";
importar {Data formatada} de"react-intl";
funçãoAplicativo() {
const hoje = novoData();


retornar (





 Hojea data é
 valor={hoje}
 dia="numérico"
 mês="longo"
 ano="numérico"
 />
 </p>
 </div>
 );
}


exportarpadrão Aplicativo;

Neste exemplo, o valor prop usa a data atual. Também, usando o dia, mês, e ano props, você especifica que deseja que o ano, o mês e o dia sejam exibidos em um formato longo.

Ao lado do dia, mês e ano, outros adereços também formatam a aparência da data. Aqui estão os adereços e os valores que eles aceitam:

  • ano: "numérico", "2 dígitos"
  • mês: "numérico", "2 dígitos", "estreito", "curto", "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: "curto longo"

Você também pode usar o Data formatada componente para formatar e exibir hora:

importar Reagir de"reagir";
importar {Data formatada} de"react-intl";
funçãoAplicativo() {
const hoje = novoData();


retornar (





 O tempo é
 valor={hoje}
 hora="numérico"
 minuto="numérico"
 segundo="numérico"
 />
 </p>
 </div>
 );
}


exportarpadrão Aplicativo;

Internacionalize seus aplicativos React para um público mais amplo

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

Os desenvolvedores do React geralmente 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.