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.
últimas postagens
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, yarn 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 à API JavaScript Intl.
Alguns componentes valiosos oferecidos pela biblioteca React Intl incluem os componentes FormattedMessage e IntlProvider.
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:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Este exemplo de arquivo de tradução contém dois objetos de tradução: messageInFrench e messageInItalian. Você pode substituir o espaço reservado {name} na string de saudação em tempo de execução por um valor dinâmico.
Para usar as traduções em seu aplicativo, você deve agrupar o componente raiz do aplicativo com o componente IntlProvider. O componente IntlProvider usa três props do React: locale, defaultLocale e messages.
A propriedade locale aceita uma string que especifica a localidade do usuário, enquanto a 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:
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>
);
Este exemplo transmite a localidade fr, a tradução messageInFrench e uma localidade en padrão para o componente IntlProvider.
Você pode passar mais de um local 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 componente FormattedMessage. O componente FormattedMessage recebe uma prop id correspondente a um ID de mensagem no objeto de mensagens.
O componente também usa uma propriedade defaultMessage e values. A propriedade defaultMessage especifica uma mensagem de fallback se uma tradução não estiver disponível para o local atual, enquanto a propriedade values fornece valores dinâmicos para os espaços reservados em suas mensagens traduzidas.
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;
Nesse bloco de código, a prop id do componente FormattedMessage usa a chave de saudação do objeto messageInFrench, e a prop values substitui o espaço reservado {name} pelo valor “John”.
Formatando números com o componente FormattedNumber
React Intl também fornece o componente FormattedNumber 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:
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;
Este exemplo usa o componente FormattedNumber que aceita uma propriedade de valor especificando o número que você deseja formatar.
Usando a propriedade de estilo, você pode personalizar a aparência do número formatado. Você pode definir a propriedade de estilo como decimal, percentual ou moeda.
Quando você define a propriedade style como moeda, o componente FormattedNumber formata o número como um valor monetário usando o código especificado na propriedade moeda:
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 formata o número no bloco de código acima usando o estilo de moeda 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 propriedades MinimumFractionDigits e maximumFractionDigits.
A propriedade MinimumFractionDigits especifica o número mínimo de dígitos de fração a serem exibidos. Em contraste, a propriedade maximumFractionDigits especifica o número máximo de dígitos de fração.
Se um número tiver menos dígitos de fração do que o MinimumFractionDigits especificado, o React Intl o preencherá com zeros. Se o número tiver mais dígitos de fração do que maximumFractionDigits especificado, a biblioteca arredondará o número para cima.
Aqui está um exemplo mostrando como você pode usar esses adereços:
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
Você pode formatar datas de maneira consistente e fácil de ler usando o React Intl. O componente FormattedDate fornece uma maneira simples e eficaz de formatar datas. Ele funciona de maneira semelhante às 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:
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;
Neste exemplo, a propriedade value usa a data atual. Além disso, usando as props dia, mês e ano, você especifica que deseja que o ano, mês e 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 componente FormattedDate para formatar e exibir a hora:
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
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.